Merge pull request #1120 from nsbno/layout-table

Improve layout of content for responsive when content overflow
nsbno · Apr 23, 2024 · a3a18a5 · a3a18a5
2 parents 4252a25 + d998cb8
commit a3a18a5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/large-bobcats-kick.md b/.changeset/large-bobcats-kick.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+Improve layout of tables when content overflow and in responsive views
diff --git a/packages/spor-react/src/table/Table.tsx b/packages/spor-react/src/table/Table.tsx
@@ -32,7 +32,7 @@ export const Table = forwardRef<TableProps, "table">((props, ref) => {
   const { variant, size, colorScheme, children, ...rest } = props;
   return (
     <Box {...rest} {...getStyleProps(props)}>
-      <Box overflowX="auto">
+      <Box overflowX="auto" role="region">
         <ChakraTable
           variant={variant}
           size={size}

diff --git a/packages/spor-react/src/theme/components/table.ts b/packages/spor-react/src/theme/components/table.ts
@@ -17,13 +17,17 @@ const config = helpers.defineMultiStyleConfig({
       borderCollapse: "collapse",
       ...baseText("default", props),
       width: "100%",
+      minWidth: "600px",
     },
     th: {
       fontWeight: "bold",
       textAlign: "start",
+      verticalAlign: "top",
+      minWidth: "68px",
     },
     td: {
       textAlign: "start",
+      verticalAlign: "top",
     },
     tfoot: {
       tr: {