From 17482ac4a642fdeb0c4b76bf3275f6d85a452a74 Mon Sep 17 00:00:00 2001
From: Sakari Malkki <sakari.malkki@stat.fi>
Date: Mon, 8 Dec 2025 13:40:51 +0200
Subject: [PATCH 1/3] Adds css styling for html table metadata section

---
 package.json                                    | 2 +-
 src/core/tables/htmlTable.ts                    | 4 ++++
 src/react/components/globalStyle/globalStyle.ts | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b0fab8f..74cc6f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsfinland/pxvisualizer",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Component library for visualizing PxGraf data",
   "main": "./dist/pxv.cjs",
   "jestSonar": {
diff --git a/src/core/tables/htmlTable.ts b/src/core/tables/htmlTable.ts
index f62f03f..a7ffc94 100644
--- a/src/core/tables/htmlTable.ts
+++ b/src/core/tables/htmlTable.ts
@@ -36,6 +36,7 @@ export function renderHtmlTable(view: View, locale: string, options: IChartOptio
         // Units
         if (options.showUnits) {
             const pUnits = document.createElement('p');
+            pUnits.className = 'tableChart-metadata';
             const unitName = getFormattedUnits(view.units, locale);
             const units: string = `${Translations.unit[locale]}: ${unitName}`;
             pUnits.append(units);
@@ -45,6 +46,7 @@ export function renderHtmlTable(view: View, locale: string, options: IChartOptio
         // Footnote
         if (footnote) {
             const pFootnote = document.createElement('p');
+            pFootnote.className = 'tableChart-metadata';
             pFootnote.append(footnote);
             container.append(pFootnote);
         }
@@ -52,6 +54,7 @@ export function renderHtmlTable(view: View, locale: string, options: IChartOptio
         // Last Updated
         if (options.showLastUpdated && view.lastUpdated) {
             const pLastUpdated = document.createElement('p');
+            pLastUpdated.className = 'tableChart-metadata';
             const lastUpdatedText = getFormattedLastUpdatedText(view.lastUpdated, locale);
             if (lastUpdatedText) {
                 pLastUpdated.append(lastUpdatedText);
@@ -62,6 +65,7 @@ export function renderHtmlTable(view: View, locale: string, options: IChartOptio
         // Sources
         if (options.showSources) {
             const pSources = document.createElement('p');
+            pSources.className = 'tableChart-metadata';
             const sources: string = `${Translations.source[locale]}: ${view.sources.map(source => source[locale]).join(', ')}`;
             pSources.append(sources);
             container.append(pSources);
diff --git a/src/react/components/globalStyle/globalStyle.ts b/src/react/components/globalStyle/globalStyle.ts
index 1a76fa9..c1fb937 100644
--- a/src/react/components/globalStyle/globalStyle.ts
+++ b/src/react/components/globalStyle/globalStyle.ts
@@ -73,4 +73,9 @@ export const GlobalStyle = createGlobalStyle`
         margin-bottom: 2rem;
         text-align: left;
     }
+
+    .tableChart-metadata {
+        margin-top: 0rem;
+        margin-bottom: 0rem;
+    }
 `;
\ No newline at end of file

From bb0bd121a6ed34f25ef7864f02250e0fe3a4cc08 Mon Sep 17 00:00:00 2001
From: Sakari Malkki <sakari.malkki@stat.fi>
Date: Mon, 8 Dec 2025 13:48:23 +0200
Subject: [PATCH 2/3] Update snapshots

---
 .../__snapshots__/htmlTable.test.ts.snap      | 64 ++++++++++----
 .../chart/__snapshots__/chart.test.tsx.snap   | 84 ++++++++++++++-----
 .../__snapshots__/tableView.test.tsx.snap     |  8 +-
 3 files changed, 117 insertions(+), 39 deletions(-)

diff --git a/src/core/tables/__snapshots__/htmlTable.test.ts.snap b/src/core/tables/__snapshots__/htmlTable.test.ts.snap
index 0bb1359..87cd233 100644
--- a/src/core/tables/__snapshots__/htmlTable.test.ts.snap
+++ b/src/core/tables/__snapshots__/htmlTable.test.ts.snap
@@ -261,10 +261,14 @@ exports[`Html table render tests should match snapshot: Table with column variab
       </tr>
     </tbody>
   </table>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Yksikkö: lukumäärä
   </p>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Lähde: PxVisualizer-fi
   </p>
 </div>"
@@ -431,10 +435,14 @@ exports[`Html table render tests should match snapshot: Table with missing data
       </tr>
     </tbody>
   </table>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Yksikkö: Eur / m2
   </p>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Lähde: PxVisualizer-fi
   </p>
 </div>"
@@ -462,10 +470,14 @@ exports[`Html table render tests should match snapshot: Table with only one cell
       </tr>
     </tbody>
   </table>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Yksikkö: lukumäärä
   </p>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Lähde: PxVisualizer-fi
   </p>
 </div>"
@@ -1104,10 +1116,14 @@ exports[`Html table render tests should match snapshot: Table with row and colum
       </tr>
     </tbody>
   </table>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
   </p>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Lähde: PxVisualizer-fi
   </p>
 </div>"
@@ -1746,7 +1762,9 @@ exports[`Html table render tests should match snapshot: Table with row and colum
       </tr>
     </tbody>
   </table>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Test footnote
   </p>
 </div>"
@@ -2378,10 +2396,14 @@ exports[`Html table render tests should match snapshot: Table with row and colum
       </tr>
     </tbody>
   </table>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
   </p>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Lähde: PxVisualizer-fi
   </p>
 </div>"
@@ -3548,10 +3570,14 @@ exports[`Html table render tests should match snapshot: Table with row variables
       </tr>
     </tbody>
   </table>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Yksikkö: lukumäärä
   </p>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Lähde: PxVisualizer-fi
   </p>
 </div>"
@@ -3579,13 +3605,19 @@ exports[`Html table render tests should match snapshot: Table with source and fo
       </tr>
     </tbody>
   </table>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Yksikkö: lukumäärä
   </p>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Test footnote
   </p>
-  <p>
+  <p
+    class="tableChart-metadata"
+  >
     Lähde: PxVisualizer-fi
   </p>
 </div>"
diff --git a/src/react/components/chart/__snapshots__/chart.test.tsx.snap b/src/react/components/chart/__snapshots__/chart.test.tsx.snap
index 959f910..a3ff388 100644
--- a/src/react/components/chart/__snapshots__/chart.test.tsx.snap
+++ b/src/react/components/chart/__snapshots__/chart.test.tsx.snap
@@ -117,7 +117,9 @@ exports[`Rendering test renders chart data correctly 1`] = `
             </tr>
           </tbody>
         </table>
-        <p>
+        <p
+          class="tableChart-metadata"
+        >
           Lähde: PxVisualizer-fi
         </p>
       </div>
@@ -204,7 +206,9 @@ exports[`Rendering test renders chart data correctly with hidden context menu 1`
             </tr>
           </tbody>
         </table>
-        <p>
+        <p
+          class="tableChart-metadata"
+        >
           Lähde: PxVisualizer-fi
         </p>
       </div>
@@ -323,7 +327,9 @@ exports[`Rendering test renders chart data correctly with hidden title 1`] = `
             </tr>
           </tbody>
         </table>
-        <p>
+        <p
+          class="tableChart-metadata"
+        >
           Lähde: PxVisualizer-fi
         </p>
       </div>
@@ -442,7 +448,9 @@ exports[`Rendering test renders chart data correctly with hidden title and conte
             </tr>
           </tbody>
         </table>
-        <p>
+        <p
+          class="tableChart-metadata"
+        >
           Lähde: PxVisualizer-fi
         </p>
       </div>
@@ -522,7 +530,9 @@ exports[`Rendering test renders chart data correctly with hidden title and hidde
             </tr>
           </tbody>
         </table>
-        <p>
+        <p
+          class="tableChart-metadata"
+        >
           Lähde: PxVisualizer-fi
         </p>
       </div>
@@ -648,10 +658,14 @@ exports[`Rendering test renders chart data correctly with last updated date 1`]
             </tr>
           </tbody>
         </table>
-        <p>
+        <p
+          class="tableChart-metadata"
+        >
           Päivitetty: 19.1.2023
         </p>
-        <p>
+        <p
+          class="tableChart-metadata"
+        >
           Lähde: PxVisualizer-fi
         </p>
       </div>
@@ -1349,7 +1363,9 @@ exports[`Rendering test renders table data correctly 1`] = `
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -2034,10 +2050,14 @@ exports[`Rendering test renders table data correctly when given footnote 1`] = `
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Test footnote
       </p>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -2722,7 +2742,9 @@ exports[`Rendering test renders table data correctly when sources are on 1`] = `
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -3407,7 +3429,9 @@ exports[`Rendering test renders table data correctly when titles are forced on 1
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -4092,13 +4116,19 @@ exports[`Rendering test renders table data correctly when units and footnote are
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
       </p>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Test footnote
       </p>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -4744,7 +4774,9 @@ exports[`Rendering test renders table data correctly with hidden context menu 1`
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -5422,7 +5454,9 @@ exports[`Rendering test renders table data correctly with hidden titles 1`] = `
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -6100,7 +6134,9 @@ exports[`Rendering test renders table data correctly with hidden titles and cont
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -6739,7 +6775,9 @@ exports[`Rendering test renders table data correctly with hidden titles and hidd
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
@@ -7424,10 +7462,14 @@ exports[`Rendering test renders table data correctly with last updated date 1`]
           </tr>
         </tbody>
       </table>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Päivitetty: 19.1.2023
       </p>
-      <p>
+      <p
+        class="tableChart-metadata"
+      >
         Lähde: PxVisualizer-fi
       </p>
     </div>
diff --git a/src/react/components/chart/__snapshots__/tableView.test.tsx.snap b/src/react/components/chart/__snapshots__/tableView.test.tsx.snap
index afab433..7c4a575 100644
--- a/src/react/components/chart/__snapshots__/tableView.test.tsx.snap
+++ b/src/react/components/chart/__snapshots__/tableView.test.tsx.snap
@@ -635,10 +635,14 @@ exports[`TableView render tests Should render correctly 1`] = `
         </tr>
       </tbody>
     </table>
-    <p>
+    <p
+      class="tableChart-metadata"
+    >
       Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
     </p>
-    <p>
+    <p
+      class="tableChart-metadata"
+    >
       Lähde: PxVisualizer-fi
     </p>
   </div>

From 61d836bfd248df6a58e02bd323fe6ff3ea7ebc46 Mon Sep 17 00:00:00 2001
From: Sakari Malkki <sakari.malkki@stat.fi>
Date: Tue, 9 Dec 2025 10:18:59 +0200
Subject: [PATCH 3/3] Convert metadata to spans, remove styling

---
 .../__snapshots__/htmlTable.test.ts.snap      | 104 ++++++--------
 src/core/tables/htmlTable.ts                  |  31 ++---
 .../chart/__snapshots__/chart.test.tsx.snap   | 131 +++++++-----------
 .../__snapshots__/tableView.test.tsx.snap     |  13 +-
 .../components/globalStyle/globalStyle.ts     |   5 -
 5 files changed, 107 insertions(+), 177 deletions(-)

diff --git a/src/core/tables/__snapshots__/htmlTable.test.ts.snap b/src/core/tables/__snapshots__/htmlTable.test.ts.snap
index 87cd233..97cdc47 100644
--- a/src/core/tables/__snapshots__/htmlTable.test.ts.snap
+++ b/src/core/tables/__snapshots__/htmlTable.test.ts.snap
@@ -261,16 +261,13 @@ exports[`Html table render tests should match snapshot: Table with column variab
       </tr>
     </tbody>
   </table>
-  <p
-    class="tableChart-metadata"
-  >
+  <span>
     Yksikkö: lukumäärä
-  </p>
-  <p
-    class="tableChart-metadata"
-  >
+  </span>
+  <span>
+    <br />
     Lähde: PxVisualizer-fi
-  </p>
+  </span>
 </div>"
 `;
 
@@ -435,16 +432,13 @@ exports[`Html table render tests should match snapshot: Table with missing data
       </tr>
     </tbody>
   </table>
-  <p
-    class="tableChart-metadata"
-  >
+  <span>
     Yksikkö: Eur / m2
-  </p>
-  <p
-    class="tableChart-metadata"
-  >
+  </span>
+  <span>
+    <br />
     Lähde: PxVisualizer-fi
-  </p>
+  </span>
 </div>"
 `;
 
@@ -470,16 +464,13 @@ exports[`Html table render tests should match snapshot: Table with only one cell
       </tr>
     </tbody>
   </table>
-  <p
-    class="tableChart-metadata"
-  >
+  <span>
     Yksikkö: lukumäärä
-  </p>
-  <p
-    class="tableChart-metadata"
-  >
+  </span>
+  <span>
+    <br />
     Lähde: PxVisualizer-fi
-  </p>
+  </span>
 </div>"
 `;
 
@@ -1116,16 +1107,13 @@ exports[`Html table render tests should match snapshot: Table with row and colum
       </tr>
     </tbody>
   </table>
-  <p
-    class="tableChart-metadata"
-  >
+  <span>
     Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
-  </p>
-  <p
-    class="tableChart-metadata"
-  >
+  </span>
+  <span>
+    <br />
     Lähde: PxVisualizer-fi
-  </p>
+  </span>
 </div>"
 `;
 
@@ -1762,11 +1750,9 @@ exports[`Html table render tests should match snapshot: Table with row and colum
       </tr>
     </tbody>
   </table>
-  <p
-    class="tableChart-metadata"
-  >
+  <span>
     Test footnote
-  </p>
+  </span>
 </div>"
 `;
 
@@ -2396,16 +2382,13 @@ exports[`Html table render tests should match snapshot: Table with row and colum
       </tr>
     </tbody>
   </table>
-  <p
-    class="tableChart-metadata"
-  >
+  <span>
     Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
-  </p>
-  <p
-    class="tableChart-metadata"
-  >
+  </span>
+  <span>
+    <br />
     Lähde: PxVisualizer-fi
-  </p>
+  </span>
 </div>"
 `;
 
@@ -3570,16 +3553,13 @@ exports[`Html table render tests should match snapshot: Table with row variables
       </tr>
     </tbody>
   </table>
-  <p
-    class="tableChart-metadata"
-  >
+  <span>
     Yksikkö: lukumäärä
-  </p>
-  <p
-    class="tableChart-metadata"
-  >
+  </span>
+  <span>
+    <br />
     Lähde: PxVisualizer-fi
-  </p>
+  </span>
 </div>"
 `;
 
@@ -3605,20 +3585,16 @@ exports[`Html table render tests should match snapshot: Table with source and fo
       </tr>
     </tbody>
   </table>
-  <p
-    class="tableChart-metadata"
-  >
+  <span>
     Yksikkö: lukumäärä
-  </p>
-  <p
-    class="tableChart-metadata"
-  >
+  </span>
+  <span>
+    <br />
     Test footnote
-  </p>
-  <p
-    class="tableChart-metadata"
-  >
+  </span>
+  <span>
+    <br />
     Lähde: PxVisualizer-fi
-  </p>
+  </span>
 </div>"
 `;
diff --git a/src/core/tables/htmlTable.ts b/src/core/tables/htmlTable.ts
index a7ffc94..d55869a 100644
--- a/src/core/tables/htmlTable.ts
+++ b/src/core/tables/htmlTable.ts
@@ -33,42 +33,41 @@ export function renderHtmlTable(view: View, locale: string, options: IChartOptio
 
         container.append(table);
 
+        let isFirstMetadata: boolean = true;
+
+        // Helper function to add metadata elements
+        const addMetadata = (text: string) => {
+            const span = document.createElement('span');
+            if (!isFirstMetadata) span.append(document.createElement('br'));
+            span.append(text);
+            container.append(span);
+            isFirstMetadata = false;
+        };
+
         // Units
         if (options.showUnits) {
-            const pUnits = document.createElement('p');
-            pUnits.className = 'tableChart-metadata';
             const unitName = getFormattedUnits(view.units, locale);
             const units: string = `${Translations.unit[locale]}: ${unitName}`;
-            pUnits.append(units);
-            container.append(pUnits);
+            addMetadata(units);
         }
 
         // Footnote
         if (footnote) {
-            const pFootnote = document.createElement('p');
-            pFootnote.className = 'tableChart-metadata';
-            pFootnote.append(footnote);
-            container.append(pFootnote);
+            addMetadata(footnote);
         }
 
         // Last Updated
         if (options.showLastUpdated && view.lastUpdated) {
-            const pLastUpdated = document.createElement('p');
-            pLastUpdated.className = 'tableChart-metadata';
             const lastUpdatedText = getFormattedLastUpdatedText(view.lastUpdated, locale);
             if (lastUpdatedText) {
-                pLastUpdated.append(lastUpdatedText);
-                container.append(pLastUpdated);
+                addMetadata(lastUpdatedText);
             }
         }
 
         // Sources
         if (options.showSources) {
-            const pSources = document.createElement('p');
-            pSources.className = 'tableChart-metadata';
             const sources: string = `${Translations.source[locale]}: ${view.sources.map(source => source[locale]).join(', ')}`;
-            pSources.append(sources);
-            container.append(pSources);
+            addMetadata(sources);
         }
 
     } catch (error) {
diff --git a/src/react/components/chart/__snapshots__/chart.test.tsx.snap b/src/react/components/chart/__snapshots__/chart.test.tsx.snap
index a3ff388..d20f9d2 100644
--- a/src/react/components/chart/__snapshots__/chart.test.tsx.snap
+++ b/src/react/components/chart/__snapshots__/chart.test.tsx.snap
@@ -117,11 +117,9 @@ exports[`Rendering test renders chart data correctly 1`] = `
             </tr>
           </tbody>
         </table>
-        <p
-          class="tableChart-metadata"
-        >
+        <span>
           Lähde: PxVisualizer-fi
-        </p>
+        </span>
       </div>
     </div>
   </div>
@@ -206,11 +204,9 @@ exports[`Rendering test renders chart data correctly with hidden context menu 1`
             </tr>
           </tbody>
         </table>
-        <p
-          class="tableChart-metadata"
-        >
+        <span>
           Lähde: PxVisualizer-fi
-        </p>
+        </span>
       </div>
     </div>
   </div>
@@ -327,11 +323,9 @@ exports[`Rendering test renders chart data correctly with hidden title 1`] = `
             </tr>
           </tbody>
         </table>
-        <p
-          class="tableChart-metadata"
-        >
+        <span>
           Lähde: PxVisualizer-fi
-        </p>
+        </span>
       </div>
     </div>
   </div>
@@ -448,11 +442,9 @@ exports[`Rendering test renders chart data correctly with hidden title and conte
             </tr>
           </tbody>
         </table>
-        <p
-          class="tableChart-metadata"
-        >
+        <span>
           Lähde: PxVisualizer-fi
-        </p>
+        </span>
       </div>
     </div>
   </div>
@@ -530,11 +522,9 @@ exports[`Rendering test renders chart data correctly with hidden title and hidde
             </tr>
           </tbody>
         </table>
-        <p
-          class="tableChart-metadata"
-        >
+        <span>
           Lähde: PxVisualizer-fi
-        </p>
+        </span>
       </div>
     </div>
   </div>
@@ -658,16 +648,13 @@ exports[`Rendering test renders chart data correctly with last updated date 1`]
             </tr>
           </tbody>
         </table>
-        <p
-          class="tableChart-metadata"
-        >
+        <span>
           Päivitetty: 19.1.2023
-        </p>
-        <p
-          class="tableChart-metadata"
-        >
+        </span>
+        <span>
+          <br />
           Lähde: PxVisualizer-fi
-        </p>
+        </span>
       </div>
     </div>
   </div>
@@ -1363,11 +1350,9 @@ exports[`Rendering test renders table data correctly 1`] = `
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -2050,16 +2035,13 @@ exports[`Rendering test renders table data correctly when given footnote 1`] = `
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Test footnote
-      </p>
-      <p
-        class="tableChart-metadata"
-      >
+      </span>
+      <span>
+        <br />
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -2742,11 +2724,9 @@ exports[`Rendering test renders table data correctly when sources are on 1`] = `
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -3429,11 +3409,9 @@ exports[`Rendering test renders table data correctly when titles are forced on 1
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -4116,21 +4094,17 @@ exports[`Rendering test renders table data correctly when units and footnote are
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
-      </p>
-      <p
-        class="tableChart-metadata"
-      >
+      </span>
+      <span>
+        <br />
         Test footnote
-      </p>
-      <p
-        class="tableChart-metadata"
-      >
+      </span>
+      <span>
+        <br />
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -4774,11 +4748,9 @@ exports[`Rendering test renders table data correctly with hidden context menu 1`
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -5454,11 +5426,9 @@ exports[`Rendering test renders table data correctly with hidden titles 1`] = `
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -6134,11 +6104,9 @@ exports[`Rendering test renders table data correctly with hidden titles and cont
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -6775,11 +6743,9 @@ exports[`Rendering test renders table data correctly with hidden titles and hidd
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -7462,16 +7428,13 @@ exports[`Rendering test renders table data correctly with last updated date 1`]
           </tr>
         </tbody>
       </table>
-      <p
-        class="tableChart-metadata"
-      >
+      <span>
         Päivitetty: 19.1.2023
-      </p>
-      <p
-        class="tableChart-metadata"
-      >
+      </span>
+      <span>
+        <br />
         Lähde: PxVisualizer-fi
-      </p>
+      </span>
     </div>
   </div>
 </DocumentFragment>
diff --git a/src/react/components/chart/__snapshots__/tableView.test.tsx.snap b/src/react/components/chart/__snapshots__/tableView.test.tsx.snap
index 7c4a575..4d97ebf 100644
--- a/src/react/components/chart/__snapshots__/tableView.test.tsx.snap
+++ b/src/react/components/chart/__snapshots__/tableView.test.tsx.snap
@@ -635,16 +635,13 @@ exports[`TableView render tests Should render correctly 1`] = `
         </tr>
       </tbody>
     </table>
-    <p
-      class="tableChart-metadata"
-    >
+    <span>
       Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
-    </p>
-    <p
-      class="tableChart-metadata"
-    >
+    </span>
+    <span>
+      <br />
       Lähde: PxVisualizer-fi
-    </p>
+    </span>
   </div>
 </DocumentFragment>
 `;
diff --git a/src/react/components/globalStyle/globalStyle.ts b/src/react/components/globalStyle/globalStyle.ts
index c1fb937..1a76fa9 100644
--- a/src/react/components/globalStyle/globalStyle.ts
+++ b/src/react/components/globalStyle/globalStyle.ts
@@ -73,9 +73,4 @@ export const GlobalStyle = createGlobalStyle`
         margin-bottom: 2rem;
         text-align: left;
     }
-
-    .tableChart-metadata {
-        margin-top: 0rem;
-        margin-bottom: 0rem;
-    }
 `;
\ No newline at end of file