goobs-frontend 0.9.10 → 0.9.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.10",
+  "version": "0.9.12",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",

package/src/components/DataGrid/Table/ColumnHeaderRow/index.tsx

@@ -19,7 +19,7 @@ interface ColumnHeaderRowProps {
   // The entire columns array if we need them on mobile
   allColumns: ColumnDef[]
 
-  // The chosen “overflow” column or mobile column
+  // The chosen "overflow" column or mobile column
   selectedOverflowField: string
   setSelectedOverflowField: React.Dispatch<React.SetStateAction<string>>
 }
@@ -77,7 +77,7 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
             boxSizing: 'border-box',
             overflow: 'visible',
             position: 'relative',
-            zIndex: 10,
+            zIndex: 100, // Increased z-index for mobile dropdown
             // If you want no left padding on mobile header as well:
             paddingLeft: 0,
           }}
@@ -93,6 +93,10 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
             shrunkfontcolor="black"
             unshrunkfontcolor="black"
             shrunklabelposition="aboveNotch"
+            style={{
+              marginBottom: 0,
+              marginTop: 0,
+            }}
           />
         </TableCell>
       </TableRow>
@@ -133,12 +137,14 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
             <TableCell
               key="overflow-header"
               sx={{
-                width: 275,
+                width: 275, // Increased width for dropdown (was 200)
+                minWidth: 275,
                 boxSizing: 'border-box',
                 overflow: 'visible',
                 position: 'relative',
-                zIndex: 10,
+                zIndex: 100, // Increased z-index to ensure dropdown appears above other elements
                 paddingLeft: 0, // <-- remove left padding here
+                height: '55px',
               }}
             >
               <SearchableDropdown
@@ -154,7 +160,11 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
                 inputfontcolor="black"
                 shrunkfontcolor="black"
                 unshrunkfontcolor="black"
-                shrunklabelposition="aboveNotch"
+                shrunklabelposition="onNotch"
+                style={{
+                  marginBottom: 0,
+                  marginTop: 0,
+                }}
               />
             </TableCell>
           )

package/src/components/DataGrid/Table/index.tsx

@@ -52,7 +52,7 @@ function Table({
   })
 
   // Decide which columns to render in the <TableHead /> for desktop.
-  // On mobile, we skip the “__overflow__” approach and just show the single dropdown.
+  // On mobile, we skip the "__overflow__" approach and just show the single dropdown.
   const finalDesktopColumns = !isMobile
     ? overflowDesktopColumns.length > 0
       ? [
@@ -63,16 +63,23 @@ function Table({
     : []
 
   return (
-    // The main wrapper. Key: allow horizontal scroll if table is too wide.
-    <Box sx={{ width: '100%', overflowX: 'auto' }}>
+    // The main wrapper - Using overflowX: 'hidden' to prevent horizontal scrollbar
+    <Box sx={{ width: '100%', overflowX: 'hidden' }}>
       {/* We set the "ref" here so that useComputeTableResize can measure width. */}
-      <TableContainer ref={containerRef} sx={{ overflowX: 'auto' }}>
+      <TableContainer
+        ref={containerRef}
+        sx={{
+          overflowX: 'visible', // Changed from 'auto' to 'visible'
+        }}
+      >
         <MuiTable
           sx={{
-            // Let columns expand to their set widths
+            // Set width to 100% to fit container
+            width: '100%',
+            // Keep tableLayout as 'auto' to respect column widths
             tableLayout: 'auto',
             // Force the table's minimum width to accommodate large columns
-            minWidth: 'fit-content',
+            minWidth: isMobile ? 'auto' : 'fit-content',
           }}
         >
           {/* Table Header */}
@@ -87,7 +94,7 @@ function Table({
               finalDesktopColumns={finalDesktopColumns}
               // Overflow columns (desktop)
               overflowDesktopColumns={overflowDesktopColumns}
-              // Current “selected” column for overflow or mobile
+              // Current "selected" column for overflow or mobile
               selectedOverflowField={selectedOverflowField}
               setSelectedOverflowField={setSelectedOverflowField}
               // The entire columns array so we can present them all on mobile

package/src/components/DataGrid/index.tsx

@@ -93,8 +93,8 @@ function DataGrid({
         flexDirection: 'column',
         // Increase or remove height if you want more vertical space:
         height: 'calc(100vh - 60px)',
-        // The key: allow horizontal scroll so columns with big widths can be scrolled
-        overflow: 'auto',
+        // Add overflow hidden at the DataGrid level to prevent horizontal scrollbars
+        overflow: 'hidden',
         backgroundColor: woad.main,
       }}
     >
@@ -132,12 +132,11 @@ function DataGrid({
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'flex-start',
+          // Ensure this container doesn't create scrollbars
+          overflow: 'hidden',
         }}
       >
-        {/* 
-          This is the actual <Table/> component (not the file).
-          Just leaving it as-is, but inside it we do a horizontal scroll and tableLayout: 'auto'.
-        */}
+        {/* Table component */}
         <Table
           columns={columns}
           rows={visibleRows}

package/src/components/DataGrid/utils/useComputeTableResize.tsx

@@ -86,8 +86,8 @@ export function useComputeTableResize({
         return 60
       }
       const header = col.headerName || col.field
-      // +40 as a buffer for padding, sorting icons, etc.
-      return measureTextWidth(header) + 40
+      // +60 as a larger buffer for padding, sorting icons, etc. to prevent premature overflow
+      return measureTextWidth(header) + 60
     },
     [measureTextWidth]
   )
@@ -102,14 +102,17 @@ export function useComputeTableResize({
     if (!containerRef.current) return
     const containerWidth = containerRef.current.offsetWidth
 
+    // Add a buffer zone to make transitions smoother
+    const COLUMN_TRANSITION_BUFFER = 50 // pixels of buffer
+
     // Only consider columns that are visible
     const visibleCols = columns.filter(
       col => columnVisibility[col.field] !== false
     )
 
     let usedWidth = checkboxSelection ? 50 : 0
-    // ~180 px for the "overflow" column if needed
-    const overflowReservedWidth = showOverflowDropdown ? 180 : 0
+    // Increase overflow column width for better usability (was 180)
+    const overflowReservedWidth = showOverflowDropdown ? 275 : 0
 
     const canFit: ColumnDef[] = []
     let theOverflow: ColumnDef[] = []
@@ -120,28 +123,43 @@ export function useComputeTableResize({
 
       if (col.width != null) {
         // If the developer explicitly set a width, forcibly add to canFit
-        canFit.push(col)
-        usedWidth += needed
-        continue
-      }
-
-      // Otherwise, do the old "fit" check
-      if (usedWidth + needed + overflowReservedWidth <= containerWidth) {
-        canFit.push(col)
-        usedWidth += needed
+        // only if we have enough space with our buffer
+        if (
+          usedWidth +
+            needed +
+            overflowReservedWidth +
+            COLUMN_TRANSITION_BUFFER <=
+          containerWidth
+        ) {
+          canFit.push(col)
+          usedWidth += needed
+        } else {
+          // Not enough space, all remaining columns go to overflow
+          theOverflow = visibleCols.slice(i)
+          break
+        }
       } else {
-        // everything else is overflow
-        theOverflow = visibleCols.slice(i)
-
-        // If we can't fit i-th column, let's see if we can also move
-        // the last fitted column to overflow
-        if (theOverflow.length > 0 && canFit.length > 1) {
-          const lastFitted = canFit.pop()
-          if (lastFitted) {
-            theOverflow = [lastFitted, ...theOverflow]
+        // Standard "does it fit?" check with buffer to prevent flickering/jumping
+        if (
+          usedWidth + needed + overflowReservedWidth <=
+          containerWidth - COLUMN_TRANSITION_BUFFER
+        ) {
+          canFit.push(col)
+          usedWidth += needed
+        } else {
+          // everything else is overflow
+          theOverflow = visibleCols.slice(i)
+
+          // If we can't fit i-th column, let's see if we can also move
+          // the last fitted column to overflow to make more room
+          if (theOverflow.length > 0 && canFit.length > 1) {
+            const lastFitted = canFit.pop()
+            if (lastFitted) {
+              theOverflow = [lastFitted, ...theOverflow]
+            }
           }
+          break
         }
-        break
       }
     }