fix: Pagination footer responsiveness

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/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

@@ -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 {

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;
-} 
+}
+
+/* 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 */
+  }
+}

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',