Feat/update responsive UI (#31)

Author: fathima-mirza

example/src/styles/componentStyles.ts

@@ -348,8 +348,6 @@ export const createComponentStyles = (colors: any, theme: ThemeProps = {}) => {
         alignItems: 'center',
         gap: '24px',
         position: 'absolute',
-        left: '50%',
-        transform: 'translateX(-50%)',
       },
       totalItems: {
         fontSize: '0.875rem',

src/components/MultiLevelTable.tsx

@@ -745,23 +745,25 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
             </div>
           </div>
         )}
-        <table
-          {...getTableProps()}
-          className="main-table-container"
-          style={{ borderColor: mergedTheme.table?.cell?.borderColor }}
-        >
-          <TableHeader
-            headerGroups={headerGroups}
-            theme={mergedTheme}
-            sortable={sortable}
-            ascendingIcon={ascendingIcon}
-            descendingIcon={descendingIcon}
-            selectable={selectable}
-            isAllSelected={selectionState.isAllSelected}
-            onSelectAll={onSelectAll}
-          />
-          {renderTableBody()}
-        </table>
+        <div className="table-responsive-container">
+          <table
+            {...getTableProps()}
+            className="main-table-container"
+            style={{ borderColor: mergedTheme.table?.cell?.borderColor }}
+          >
+            <TableHeader
+              headerGroups={headerGroups}
+              theme={mergedTheme}
+              sortable={sortable}
+              ascendingIcon={ascendingIcon}
+              descendingIcon={descendingIcon}
+              selectable={selectable}
+              isAllSelected={selectionState.isAllSelected}
+              onSelectAll={onSelectAll}
+            />
+            {renderTableBody()}
+          </table>
+        </div>
 
         {renderPagination()}
       </div>

src/components/Pagination.tsx

@@ -105,9 +105,7 @@ export const Pagination: React.FC<PaginationProps> = ({
         display: 'flex', 
         alignItems: 'center', 
         gap: '24px',
-        position: 'absolute',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        position: 'absolute'
       }}>
         {/* Total Items Text */}
         <div style={{ ...componentStyles.pagination.totalItems, position: 'static' }}>

src/styles/MultiLevelTable.css

@@ -4,12 +4,59 @@
   border-spacing: 0;
 }
 
+/* Main container styling to prevent black space */
 .table-wrapper {
+  width: 100%;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  /* Remove overflow-x from wrapper to prevent black space */
+  margin: 0;
+  padding: 0 ;
+  /* Ensure proper height */
+  height: auto;
+  min-height: 0;
+  /* Prevent any overflow issues */
+  overflow: visible;
+}
+
+/* Responsive table container */
+.table-responsive-container {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  /* Show scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: #c1c1c1 #f1f1f1;
+  /* Prevent extra space */
+  margin: 0;
+  padding: 0;
+  /* Prevent vertical overflow */
+  overflow-y: hidden;
+  /* Ensure proper height */
+  height: auto;
+  min-height: 0;
+  /* Ensure horizontal scroll works properly */
+  white-space: nowrap;
+}
+
+/* Custom scrollbar styling */
+.table-responsive-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.table-responsive-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.table-responsive-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.table-responsive-container::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 /* Ensure table container maintains proper spacing */
@@ -21,6 +68,20 @@
   padding: 0;
 }
 
+/* Ensure no extra space from table elements */
+.main-table-container * {
+  box-sizing: border-box;
+}
+
+/* Ensure pagination doesn't create extra space */
+.table-wrapper > div:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  /* Ensure pagination maintains its layout on smaller screens */
+  min-width: 1200px; /* Match table minimum width */
+  overflow-x: auto; /* Allow horizontal scroll if needed */
+}
+
 .main-table-container {
   width: 100%;
   border: 1px solid #d9d9d9;
@@ -30,6 +91,9 @@
   border-radius: 12px;
   overflow: hidden;
   table-layout: fixed;
+  min-width: 1200px; /* Increased minimum width to ensure all content fits properly */
+  margin: 0; /* Remove any margin */
+  padding: 0; /* Remove any padding */
 }
 
 /* Ensure table cells don't wrap content */
@@ -38,6 +102,8 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* Prevent content from being truncated */
+  min-width: 0;
 }
 
 /* Column width distribution - spread across full width with end spacing for actions */
@@ -144,6 +210,10 @@
   vertical-align: middle;
   box-sizing: border-box;
   text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 120px; /* Increased minimum width to prevent content trimming */
 }
 
 .main-table-container tr:last-child td {
@@ -178,25 +248,29 @@
   align-items: center;
   padding: 1rem;
   gap: 1rem;
+  flex-wrap: nowrap; /* Prevent wrapping on larger screens */
 }
 
 .search-bar-left {
   display: flex;
   align-items: center;
   gap: 1rem;
   flex: 1;
+  min-width: 0; /* Allow shrinking */
 }
 
 .search-bar-right {
   display: flex;
   gap: 0.5rem;
-  flex-shrink: 0;
+  flex-shrink: 0; /* Prevent shrinking */
+  align-items: center;
 }
 
 .table-title-container {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  flex-shrink: 0; /* Prevent title from shrinking */
 }
 
 .table-subtitle {
@@ -211,9 +285,10 @@
   position: relative;
   width: 100%;
   height: 48px;
-  min-width: 0;
+  min-width: 200px; /* Minimum width for search */
   max-width: 400px;
   flex: 1;
+  min-width: 0; /* Allow shrinking below 200px when needed */
 }
 
 .search-input-icon {
@@ -250,23 +325,177 @@
   opacity: 1;
 }
 
-/* Responsive design with better breakpoints */
+/* Responsive design with comprehensive breakpoints */
 @media (max-width: 768px) {
+  /* Tablet and smaller - Title on first line, search bar and buttons on second line */
   .search-bar-container {
     flex-direction: column;
     align-items: stretch;
+    gap: 1rem;
   }
 
   .search-bar-left {
-    flex-direction: column;
-    align-items: stretch;
+    width: 100%;
   }
 
+  .search-bar-right {
+    width: 100%;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
   .search-input-container {
     max-width: none;
+    min-width: 200px;
+    flex: 1;
+  }
+  
+  
+  /* Ensure table scrolls horizontally on mobile */
+  .table-responsive-container {
+    overflow-x: auto;
+    min-width: 1200px; /* Match table minimum width */
+  }
+  
+  /* Ensure table headers and cells don't break */
+  .main-table-container th,
+  .main-table-container td {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 120px; /* Minimum width for mobile */
+  }
+  
+  /* Adjust column widths for mobile - maintain exact same proportions */
+  .main-table-container th:nth-child(1),
+  .main-table-container td:nth-child(1) {
+    min-width: 264px; /* Resource Type - 22% of 1200px */
+  }
+  
+  .main-table-container th:nth-child(2),
+  .main-table-container td:nth-child(2) {
+    min-width: 216px; /* Name - 18% of 1200px */
+  }
+  
+  .main-table-container th:nth-child(3),
+  .main-table-container td:nth-child(3) {
+    min-width: 216px; /* Date & Time - 18% of 1200px */
+  }
+  
+  .main-table-container th:nth-child(4),
+  .main-table-container td:nth-child(4) {
+    min-width: 144px; /* Status - 12% of 1200px */
   }
 
+  .main-table-container th:nth-child(5),
+  .main-table-container td:nth-child(5) {
+    min-width: 144px; /* Orchestration - 12% of 1200px */
+  }
+  
+  .main-table-container th:nth-child(6),
+  .main-table-container td:nth-child(6) {
+    min-width: 96px; /* Actions - 8% of 1200px */
+  }
+}
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+  .search-bar-container {
+    padding: 0.75rem;
+    gap: 0.75rem;
+  }
+  
+  .search-bar-left {
+    width: 100%;
+  }
+  
+  .search-bar-right {
+    width: 100%;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  .search-input-container {
+    height: 44px; /* Slightly smaller on very small screens */
+    min-width: 120px; /* Further reduced minimum width for very small screens */
+    flex: 1;
+  }
+  
+  .search-input {
+    height: 44px;
+    font-size: 13px;
+  }
+}
+
+/* ≤ 1024 px – turn the whole header into a 2‑row grid */
+@media (max-width: 1024px) {
+  .search-bar-container {
+    display: grid;
+    grid-template-columns: 1fr auto;     /* search grows, buttons = auto */
+    grid-template-areas:
+      "title   title"                    /* row 1: title full‑width      */
+      "search  buttons";                 /* row 2: search + buttons      */
+    gap: 1rem;
+    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 {
-    justify-content: center;
+    grid-area: buttons;
+    justify-self: end;                   /* align right edge             */
+  }
+}
+
+/* Large desktop breakpoint */
+@media (min-width: 1025px) {
+  .search-bar-container {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+/* Tablet and smaller breakpoint */
+@media (max-width: 1024px) {
+  .search-bar-container > * {
+    margin-bottom: 0.5rem;
+  }
+  
+  .search-bar-left,
+  .search-bar-right {
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .search-input-container {
+    max-width: 350px;
+  }
+}
+
+/* Medium desktop breakpoint */
+@media (max-width: 1200px) and (min-width: 1025px) {
+  .search-input-container {
+    max-width: 350px; /* Slightly reduced for medium screens */
+  }
+  
+  .table-responsive-container {
+    overflow-x: auto;
+    min-width: 1200px; /* Match table minimum width */
+  }
+  
+  .main-table-container th,
+  .main-table-container td {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }