fix: Auto-arrange title, searchbar, buttons responsively

Author: fathima-mirza

src/components/ButtonGroup.tsx

@@ -62,9 +62,9 @@ export const ButtonGroup: React.FC<ButtonGroupProps> = ({
   };
 
   return (
-    <div style={{ display: "flex", gap: "0.5rem", flexShrink: 0 }}>
+    <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
       {buttons.map((button) => (
-        <div key={button.id} style={{ position: 'relative' }}>
+        <div key={button.id} style={{ position: 'relative', flexShrink: 0 }}>
           <Button
             icon={button.icon}
             text={button.text}

src/components/MultiLevelTable.tsx

@@ -704,43 +704,41 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
       <div className="table-wrapper">
         {showSearchBar && (
           <div className="search-bar-container">
-            <div className="search-bar-left">
-              {tableTitle && (
-                <div className="table-title-container">
-                  <h2 style={componentStyles.title.table}>
-                    {tableTitle}
-                  </h2>
-                  {tableSubtitle && (
-                    <p 
-                      className="table-subtitle"
-                      style={{
-                        color: mergedTheme.colors?.textColor || colors.textSecondary,
-                      }}
-                    >
-                      {tableSubtitle}
-                    </p>
-                  )}
-                </div>
-              )}
-              <div className="search-input-container">
-                <span className="search-input-icon">
-                  <SearchIcon width={24} height={24} />
-                </span>
-                <input
-                  className="search-input"
-                  type="text"
-                  placeholder="Search"
-                  value={searchTerm}
-                  onChange={e => onSearchChange?.(e.target.value)}
-                  style={{
-                    borderColor: mergedTheme.table?.cell?.borderColor || colors.searchBorder,
-                    backgroundColor: mergedTheme.colors?.background || colors.backgroundWhite,
-                    color: mergedTheme.colors?.textColor || colors.textPrimary,
-                  }}
-                />
+            {tableTitle && (
+              <div className="table-title-container">
+                <h2 style={componentStyles.title.table}>
+                  {tableTitle}
+                </h2>
+                {tableSubtitle && (
+                  <p 
+                    className="table-subtitle"
+                    style={{
+                      color: mergedTheme.colors?.textColor || colors.textSecondary,
+                    }}
+                  >
+                    {tableSubtitle}
+                  </p>
+                )}
               </div>
+            )}
+            <div className="search-input-container">
+              <span className="search-input-icon">
+                <SearchIcon width={24} height={24} />
+              </span>
+              <input
+                className="search-input"
+                type="text"
+                placeholder="Search"
+                value={searchTerm}
+                onChange={e => onSearchChange?.(e.target.value)}
+                style={{
+                  borderColor: mergedTheme.table?.cell?.borderColor || colors.searchBorder,
+                  backgroundColor: mergedTheme.colors?.background || colors.backgroundWhite,
+                  color: mergedTheme.colors?.textColor || colors.textPrimary,
+                }}
+              />
             </div>
-            <div className="search-bar-right">
+            <div className="action-buttons-container">
               {renderActionButtons()}
             </div>
           </div>

src/styles/MultiLevelTable.css

@@ -252,22 +252,13 @@
   align-items: center;
   padding: 1rem;
   gap: 1rem;
-  flex-wrap: nowrap; /* Prevent wrapping on larger screens */
+  flex-wrap: wrap; /* Allow natural wrapping */
 }
 
-.search-bar-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-  min-width: 0; /* Allow shrinking */
-}
-
-.search-bar-right {
+.action-buttons-container {
   display: flex;
   gap: 0.5rem;
-  flex-shrink: 0; /* Prevent shrinking */
-  align-items: center;
+  flex-wrap: wrap; /* Allow buttons to wrap */
 }
 
 .table-title-container {
@@ -338,14 +329,12 @@
     gap: 1rem;
   }
 
-  .search-bar-left {
+  .action-buttons-container {
     width: 100%;
-  }
-  
-  .search-bar-right {
-    width: 100%;
-    justify-content: space-between;
-    gap: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: flex-start;
   }
 
   .search-input-container {
@@ -409,11 +398,7 @@
     gap: 0.75rem;
   }
 
-  .search-bar-left {
-    width: 100%;
-  }
-  
-  .search-bar-right {
+  .action-buttons-container {
     width: 100%;
     justify-content: space-between;
     gap: 0.5rem;
@@ -455,22 +440,84 @@
     align-items: center;
   }
 
-  /* let the children of .search-bar-left take part in the grid */
-  .search-bar-left {
-    display: contents;                   /* no box of its own            */
-  }
-
   /* name each piece */
   .table-title-container { grid-area: title; }
   .search-input-container { grid-area: search; }
 
   /* push buttons to the right */
-  .search-bar-right {
+  .action-buttons-container {
     grid-area: buttons;
     justify-self: end;                   /* align right edge             */
   }
 }
 
+/* ≤ 700px – 3-line layout for 3+ buttons */
+@media (max-width: 700px) {
+  .search-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .action-buttons-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: flex-start;
+  }
+
+  /* Allow search bar and buttons to share the same line when possible */
+  .search-input-container {
+    flex: 1;
+    min-width: 200px;
+  }
+}
+
+/* ≤ 527px – 3-line layout for 2 buttons */
+@media (max-width: 527px) {
+  .search-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .action-buttons-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: flex-start;
+  }
+}
+
+/* ≤ 489px – 4-line layout with 2x2 button grid for 3 buttons */
+@media (max-width: 489px) {
+  .search-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .action-buttons-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  /* Ensure buttons maintain their minimum width and don't break content */
+  .action-buttons-container > * {
+    min-width: 120px;
+    flex-shrink: 0;
+  }
+}
+
 /* Large desktop breakpoint */
 @media (min-width: 1025px) {
   .search-bar-container {
@@ -485,8 +532,7 @@
     margin-bottom: 0.5rem;
   }
 
-  .search-bar-left,
-  .search-bar-right {
+  .action-buttons-container {
     width: 100%;
   }
 }