Merge pull request #132 from GetDKAN/table-width-fix

WCMS-10130: Fix table styling on very small screens
GetDKAN · Aug 3, 2023 · f5278d0 · f5278d0
2 parents 0ead67a + ec4c62a
commit f5278d0
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",

diff --git a/src/components/DatasetAdditionalInformation/additional-information-table.scss b/src/components/DatasetAdditionalInformation/additional-information-table.scss
@@ -7,3 +7,8 @@
 .dc-c-additional-info-table a {
   word-break: break-all;
 }
+
+.ds-u-word-break-anywhere {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
diff --git a/src/components/DatasetAdditionalInformation/index.jsx b/src/components/DatasetAdditionalInformation/index.jsx
@@ -30,7 +30,7 @@ const DatasetAdditionalInformation = ({ datasetInfo, id, metadataMapping}) => {
           {rows.map((r) => (
             <TableRow key={`${r.label}_${id}`}>
               <TableCell>{r.label}</TableCell>
-              <TableCell>{r.value}</TableCell>
+              <TableCell className="ds-u-word-break-anywhere">{r.value}</TableCell>
             </TableRow>
           ))}
         </TableBody>