Skip to content

Feat/update pagination and horizontal scroll #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 23, 2025
Merged

Feat/update pagination and horizontal scroll #32

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 36 additions & 5 deletions src/styles/MultiLevelTable.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
min-height: 0;
/* Ensure horizontal scroll works properly */
white-space: nowrap;
/* Force horizontal scroll for all screen sizes below 1200px */
min-width: 0;
}

/* Custom scrollbar styling */
Expand Down Expand Up @@ -78,7 +80,7 @@
margin-bottom: 0;
padding-bottom: 0;
/* Ensure pagination maintains its layout on smaller screens */
min-width: 1200px; /* Match table minimum width */
width: 100%;
overflow-x: auto; /* Allow horizontal scroll if needed */
}

Expand All @@ -91,9 +93,11 @@
border-radius: 12px;
overflow: hidden;
table-layout: fixed;
min-width: 1200px; /* Increased minimum width to ensure all content fits properly */
min-width: 1200px; /* Minimum width to ensure all content fits properly */
margin: 0; /* Remove any margin */
padding: 0; /* Remove any padding */
/* Ensure table doesn't shrink below minimum width */
flex-shrink: 0;
}

/* Ensure table cells don't wrap content */
Expand Down Expand Up @@ -350,11 +354,11 @@
flex: 1;
}


/* Ensure table scrolls horizontally on mobile */
.table-responsive-container {
overflow-x: auto;
min-width: 1200px; /* Match table minimum width */
min-width: 0; /* Allow container to shrink */
width: 100%;
}

/* Ensure table headers and cells don't break */
Expand Down Expand Up @@ -425,6 +429,18 @@
height: 44px;
font-size: 13px;
}

/* Ensure horizontal scrolling works on very small screens */
.table-responsive-container {
overflow-x: auto !important;
min-width: 0 !important;
width: 100% !important;
}

.main-table-container {
min-width: 1200px !important;
width: 1200px !important;
}
}

/* ≤ 1024 px – turn the whole header into a 2‑row grid */
Expand Down Expand Up @@ -489,7 +505,8 @@

.table-responsive-container {
overflow-x: auto;
min-width: 1200px; /* Match table minimum width */
min-width: 0; /* Allow container to shrink */
width: 100%;
}

.main-table-container th,
Expand All @@ -499,3 +516,17 @@
text-overflow: ellipsis;
}
}

/* Ensure horizontal scrolling for all screen sizes below 1200px */
@media (max-width: 1199px) {
.table-responsive-container {
overflow-x: auto !important;
min-width: 0 !important;
width: 100% !important;
}

.main-table-container {
min-width: 1200px !important;
width: 1200px !important;
}
}
Loading