From 93e5c8d5ee1d9e25939a5ec9247d9f159958a6db Mon Sep 17 00:00:00 2001
From: fathima <fathima@keyvalue.systems>
Date: Tue, 22 Jul 2025 16:26:27 +0530
Subject: [PATCH 1/4] feat: Table title, search bar and button responsiveness

---
 src/components/MultiLevelTable.tsx |  36 ++---
 src/styles/MultiLevelTable.css     | 235 ++++++++++++++++++++++++++++-
 2 files changed, 247 insertions(+), 24 deletions(-)

diff --git a/src/components/MultiLevelTable.tsx b/src/components/MultiLevelTable.tsx
index b9a227c..ff94b90 100644
--- a/src/components/MultiLevelTable.tsx
+++ b/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>
diff --git a/src/styles/MultiLevelTable.css b/src/styles/MultiLevelTable.css
index 9161927..223c66b 100644
--- a/src/styles/MultiLevelTable.css
+++ b/src/styles/MultiLevelTable.css
@@ -4,12 +4,57 @@
   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;
+}
+
+/* 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 +66,17 @@
   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;
+}
+
 .main-table-container {
   width: 100%;
   border: 1px solid #d9d9d9;
@@ -30,6 +86,9 @@
   border-radius: 12px;
   overflow: hidden;
   table-layout: fixed;
+  min-width: 900px; /* Ensure minimum width to prevent content trimming */
+  margin: 0; /* Remove any margin */
+  padding: 0; /* Remove any padding */
 }
 
 /* Ensure table cells don't wrap content */
@@ -144,6 +203,10 @@
   vertical-align: middle;
   box-sizing: border-box;
   text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 100px; /* Minimum width to prevent content trimming */
 }
 
 .main-table-container tr:last-child td {
@@ -178,6 +241,7 @@
   align-items: center;
   padding: 1rem;
   gap: 1rem;
+  flex-wrap: nowrap; /* Prevent wrapping on larger screens */
 }
 
 .search-bar-left {
@@ -185,18 +249,21 @@
   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 +278,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 +318,176 @@
   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: 900px; /* 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 */
+  .main-table-container th:nth-child(1),
+  .main-table-container td:nth-child(1) {
+    min-width: 150px; /* Resource Type */
+  }
+  
+  .main-table-container th:nth-child(2),
+  .main-table-container td:nth-child(2) {
+    min-width: 120px; /* Name */
+  }
+  
+  .main-table-container th:nth-child(3),
+  .main-table-container td:nth-child(3) {
+    min-width: 140px; /* Date & Time */
+  }
+  
+  .main-table-container th:nth-child(4),
+  .main-table-container td:nth-child(4) {
+    min-width: 100px; /* Status */
+  }
+  
+  .main-table-container th:nth-child(5),
+  .main-table-container td:nth-child(5) {
+    min-width: 120px; /* Orchestration */
   }
   
+  .main-table-container th:nth-child(6),
+  .main-table-container td:nth-child(6) {
+    min-width: 100px; /* Actions */
+  }
+}
+
+/* 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 {
+    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 {
-    justify-content: center;
+    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;
+  }
+  
+  .main-table-container th,
+  .main-table-container td {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }

From 7b8205f3df0f1d5b83ea01cef191e47f80c256a9 Mon Sep 17 00:00:00 2001
From: fathima <fathima@keyvalue.systems>
Date: Tue, 22 Jul 2025 17:59:43 +0530
Subject: [PATCH 2/4] feat: Table row responsive style

---
 src/styles/MultiLevelTable.css | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/styles/MultiLevelTable.css b/src/styles/MultiLevelTable.css
index 223c66b..9d32137 100644
--- a/src/styles/MultiLevelTable.css
+++ b/src/styles/MultiLevelTable.css
@@ -36,6 +36,8 @@
   /* Ensure proper height */
   height: auto;
   min-height: 0;
+  /* Ensure horizontal scroll works properly */
+  white-space: nowrap;
 }
 
 /* Custom scrollbar styling */
@@ -86,7 +88,7 @@
   border-radius: 12px;
   overflow: hidden;
   table-layout: fixed;
-  min-width: 900px; /* Ensure minimum width to prevent content trimming */
+  min-width: 1200px; /* Increased minimum width to ensure all content fits properly */
   margin: 0; /* Remove any margin */
   padding: 0; /* Remove any padding */
 }
@@ -97,6 +99,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 */
@@ -206,7 +210,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  min-width: 100px; /* Minimum width to prevent content trimming */
+  min-width: 120px; /* Increased minimum width to prevent content trimming */
 }
 
 .main-table-container tr:last-child td {
@@ -347,7 +351,7 @@
   /* Ensure table scrolls horizontally on mobile */
   .table-responsive-container {
     overflow-x: auto;
-    min-width: 900px; /* Match table minimum width */
+    min-width: 1200px; /* Match table minimum width */
   }
   
   /* Ensure table headers and cells don't break */
@@ -359,35 +363,35 @@
     min-width: 120px; /* Minimum width for mobile */
   }
   
-  /* Adjust column widths 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: 150px; /* Resource Type */
+    min-width: 264px; /* Resource Type - 22% of 1200px */
   }
   
   .main-table-container th:nth-child(2),
   .main-table-container td:nth-child(2) {
-    min-width: 120px; /* Name */
+    min-width: 216px; /* Name - 18% of 1200px */
   }
   
   .main-table-container th:nth-child(3),
   .main-table-container td:nth-child(3) {
-    min-width: 140px; /* Date & Time */
+    min-width: 216px; /* Date & Time - 18% of 1200px */
   }
   
   .main-table-container th:nth-child(4),
   .main-table-container td:nth-child(4) {
-    min-width: 100px; /* Status */
+    min-width: 144px; /* Status - 12% of 1200px */
   }
   
   .main-table-container th:nth-child(5),
   .main-table-container td:nth-child(5) {
-    min-width: 120px; /* Orchestration */
+    min-width: 144px; /* Orchestration - 12% of 1200px */
   }
   
   .main-table-container th:nth-child(6),
   .main-table-container td:nth-child(6) {
-    min-width: 100px; /* Actions */
+    min-width: 96px; /* Actions - 8% of 1200px */
   }
 }
 
@@ -482,6 +486,7 @@
   
   .table-responsive-container {
     overflow-x: auto;
+    min-width: 1200px; /* Match table minimum width */
   }
   
   .main-table-container th,

From 7ad9f42ac23bb5f7b01333a2d97d38072c19a3c6 Mon Sep 17 00:00:00 2001
From: fathima <fathima@keyvalue.systems>
Date: Tue, 22 Jul 2025 18:13:23 +0530
Subject: [PATCH 3/4] fix: Pagination footer responsiveness

---
 example/src/styles/componentStyles.ts |  2 -
 src/components/Pagination.tsx         |  4 +-
 src/styles/MultiLevelTable.css        |  3 ++
 src/styles/Pagination.css             | 59 ++++++++++++++++++++++++++-
 src/styles/componentStyles.ts         |  2 -
 5 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/example/src/styles/componentStyles.ts b/example/src/styles/componentStyles.ts
index 22bc321..c69b46d 100644
--- a/example/src/styles/componentStyles.ts
+++ b/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',
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 0318f7c..6a1ead8 100644
--- a/src/components/Pagination.tsx
+++ b/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' }}>
diff --git a/src/styles/MultiLevelTable.css b/src/styles/MultiLevelTable.css
index 9d32137..8d562bf 100644
--- a/src/styles/MultiLevelTable.css
+++ b/src/styles/MultiLevelTable.css
@@ -77,6 +77,9 @@
 .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 {
diff --git a/src/styles/Pagination.css b/src/styles/Pagination.css
index c2c0aa8..78209d7 100644
--- a/src/styles/Pagination.css
+++ b/src/styles/Pagination.css
@@ -4,6 +4,22 @@
   justify-content: space-between;
   align-items: center;
   padding: 12px;
+  /* Ensure pagination doesn't break on smaller screens */
+  min-width: 1200px; /* Match table minimum width */
+  overflow-x: auto; /* Allow horizontal scroll if needed */
+  -webkit-overflow-scrolling: touch;
+  /* Ensure content container has proper width */
+  position: relative;
+}
+
+/* Ensure the centered content container has minimum width */
+.pagination-container > div {
+  min-width: 600px; /* Minimum width for pagination content */
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  position: absolute;
+  white-space: nowrap; /* Prevent text wrapping */
 }
 
 .pagination-button {
@@ -24,6 +40,9 @@
 .pagination-info {
   color: #2c3e50;
   margin-left: 8px;
+  /* Ensure total items text doesn't break */
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .pagination-select {
@@ -32,6 +51,10 @@
   border-radius: 4px;
   background-color: #ffffff;
   color: #262626;
+  /* Ensure page size selector doesn't break */
+  white-space: nowrap;
+  flex-shrink: 0;
+  min-width: 80px; /* Minimum width for the selector */
 }
 
 .pagination-select option {
@@ -50,4 +73,38 @@
 .pagination-select option:selected {
   background-color: #5D5FEF !important;
   color: #ffffff !important;
-} 
\ No newline at end of file
+}
+
+/* Responsive styles to prevent pagination from breaking on smaller screens */
+@media (max-width: 1200px) {
+  .pagination-container {
+    min-width: 1200px; /* Maintain minimum width */
+    overflow-x: auto; /* Enable horizontal scroll */
+  }
+  
+  .pagination-container > div {
+    min-width: 600px; /* Maintain minimum width for content */
+  }
+}
+
+@media (max-width: 768px) {
+  .pagination-container {
+    min-width: 1200px; /* Maintain minimum width */
+    overflow-x: auto; /* Enable horizontal scroll */
+  }
+  
+  .pagination-container > div {
+    min-width: 600px; /* Maintain minimum width for content */
+  }
+}
+
+@media (max-width: 480px) {
+  .pagination-container {
+    min-width: 1200px; /* Maintain minimum width */
+    overflow-x: auto; /* Enable horizontal scroll */
+  }
+  
+  .pagination-container > div {
+    min-width: 600px; /* Maintain minimum width for content */
+  }
+}
\ No newline at end of file
diff --git a/src/styles/componentStyles.ts b/src/styles/componentStyles.ts
index 0a39788..ef85854 100644
--- a/src/styles/componentStyles.ts
+++ b/src/styles/componentStyles.ts
@@ -350,8 +350,6 @@ export const createComponentStyles = (theme: ThemeProps = {}) => {
         alignItems: 'center',
         gap: '24px',
         position: 'absolute',
-        left: '50%',
-        transform: 'translateX(-50%)',
       },
       totalItems: {
         fontSize: '0.875rem',

From 429695e93a62486816fc2224cd3dc82bf70257d0 Mon Sep 17 00:00:00 2001
From: fathima <fathima@keyvalue.systems>
Date: Wed, 23 Jul 2025 09:59:01 +0530
Subject: [PATCH 4/4] feat: Table header responsiveness

---
 src/styles/TableHeader.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/TableHeader.css b/src/styles/TableHeader.css
index ba50878..de3dcd9 100644
--- a/src/styles/TableHeader.css
+++ b/src/styles/TableHeader.css
@@ -19,7 +19,7 @@
 
 .table-header-cell{
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-start;
   gap: 4px;