Merge branch 'responsive_table_styling'

src/common/ResponsiveTable.tsx

@@ -28,13 +28,12 @@ const useStyles = makeStyles((theme: Theme) => {
       marginTop: theme.spacing(-2),
     },
     titleComp: {
-      padding: theme.spacing(1),
+      padding: theme.spacing(1, 1, 0, 1.5),
-      marginLeft: theme.spacing(-1)
     },
     subtitleComp: {
-      padding: theme.spacing(1),
+      padding: theme.spacing(0, 1, 0.5, 1.5),
-      marginTop: theme.spacing(-2),
+      display: "flex",
-      marginLeft: theme.spacing(-1),
+      alignItems: "center",
     },
     titleContainer: {
       border: "none",
@@ -42,6 +41,8 @@ const useStyles = makeStyles((theme: Theme) => {
     searchContainer: {
       border: "none",
       textAlign: "right",
+      display: "flex",
+      alignItems: "center",
     },
     mobileTitleBox: {
       margin: theme.spacing(1),
@@ -118,8 +119,9 @@ function ResizableHeaderTitle<T>(props: {
           : {}),
       }}
     >
-      <Box component="span" sx={{ whiteSpace: "nowrap" }}>
+      <Box component="span" sx={{ whiteSpace: "nowrap", display: "inline-flex", alignItems: "center" }}>
-        {column.title} {showOrderIcon(column)}
+        <Box component="span">{column.title}</Box>
+        {showOrderIcon(column)}
       </Box>
     </Grid2>
   );
@@ -491,9 +493,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
     if (sortKey === orderBy) {
       if (order === "asc") {
-        return <ArrowDownward fontSize="small" sx={{ marginLeft: 1 }} />
+        return (
+          <Box component="span" sx={{ ml: 0.5, display: "inline-flex", alignItems: "center" }}>
+            <ArrowDownward fontSize="small" />
+          </Box>
+        )
       } else {
-        return <ArrowUpward fontSize="small" sx={{ marginLeft: 1 }} />
+        return (
+          <Box component="span" sx={{ ml: 0.5, display: "inline-flex", alignItems: "center" }}>
+            <ArrowUpward fontSize="small" />
+          </Box>
+        )
       }
     }
     return null;
@@ -536,15 +546,19 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     const clampedWidth = Math.max(MIN_COLUMN_WIDTH, newWidthForIndex)
     const actualDelta = newWidths[index] - clampedWidth
     newWidths[index] = clampedWidth
-    newWidths.every((width, j) => {
-      if (j <= index || width === 0) return true
-      else if (newWidths[j] !== undefined) {
-        newWidths[j] = newWidths[j] + actualDelta
-        return false
-      }
-    })
-    setRowWidths(newWidths)
 
+    if (actualDelta > 0) {
+      // Shrinking current column – give space to next column
+      newWidths[index + 1] = (newWidths[index + 1] ?? 0) + actualDelta
+    } else if (actualDelta < 0) {
+      // Growing current column – take from next column only what it can give
+      const nextWidth = newWidths[index + 1] ?? 0
+      const availableFromNext = Math.max(0, nextWidth - MIN_COLUMN_WIDTH)
+      const takeFromNext = Math.min(-actualDelta, availableFromNext)
+      newWidths[index + 1] = nextWidth - takeFromNext
+      // If we couldn't take enough, the table grows (clampedWidth already applied)
+    }
+    setRowWidths(newWidths)
   }
 
   const MIN_COLUMN_WIDTH = 24;
@@ -553,14 +567,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     <Box className={classes.tableContainer} component={Paper}>
       {(title || setSearchText) && (
         <Box>
-          <Grid2 container justifyContent="space-between" alignItems="center" sx={{ padding: 1 }}>
+          <Grid2
+            container
+            justifyContent="space-between"
+            alignItems="center"
+            sx={{ px: 1.5, pt: 1, pb: 0.5 }}
+          >
             <Grid2>
-              <Box sx={{ marginTop: -1 }}>
               {renderTitle()}
               {renderSubtitle()}
-              </Box>
             </Grid2>
-            <Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end" }}>
+            <Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end", mt: -1 }}>
               <Grid2 container alignItems="center" spacing={1} wrap="nowrap">
                 <Grid2>
                   {actions && actions}