denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Adjust z-index values for dropdowns and page header to maintain proper stacking order below modals, enhancing visibility and usability
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 17m5s
Details

Browse Source
This commit is contained in:
denozord
2025-08-13 12:54:04 +07:00
parent 158af391b0
commit 855fc5d577
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+6 -9
View File
@@ -234,8 +234,8 @@
overflow-x: auto; overflow-x: auto;
padding-bottom: 2px; /* to avoid cutting off focus outline */ padding-bottom: 2px; /* to avoid cutting off focus outline */
/* Ensure dropdowns are not covered by following content (e.g., tables) */ /* Ensure dropdowns are not covered by following content (e.g., tables) */
position: relative; /* creates local stacking context for toolbar controls */ position: relative; /* local stacking context for toolbar controls */
z-index: 3000; /* higher than cards/tables so dropdowns render on top */ z-index: auto; /* keep toolbar below modals */
} }
.header-actions .btn-group { .header-actions .btn-group {
display: flex; display: flex;
@@ -252,17 +252,14 @@
} }
.header-actions .btn svg { width: 18px; height: 18px; } .header-actions .btn svg { width: 18px; height: 18px; }
/* Ensure dropdowns in header-actions overlay tables/cards correctly */ /* Ensure dropdowns in header-actions overlay tables/cards correctly but stay below modals */
.header-actions .dropdown-menu, .header-actions .dropdown-menu,
.page-header .dropdown-menu { .page-header .dropdown-menu {
z-index: 3001; /* slightly above the toolbar itself */ z-index: 1035; /* above navbar(1030), below modal-backdrop(1040) and modal(1050) */
} }
/* Elevate the entire page header above content cards/tables to avoid clipping */ /* Keep page-header in normal stacking order (below modals) */
.page-header { .page-header { position: relative; z-index: auto; }
position: relative;
z-index: 3000;
}
/* Responsive sizing for small screens */ /* Responsive sizing for small screens */
@media (max-width: 992px) { @media (max-width: 992px) {