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;
padding-bottom: 2px; /* to avoid cutting off focus outline */
/* Ensure dropdowns are not covered by following content (e.g., tables) */
position: relative; /* creates local stacking context for toolbar controls */
z-index: 3000; /* higher than cards/tables so dropdowns render on top */
position: relative; /* local stacking context for toolbar controls */
z-index: auto; /* keep toolbar below modals */
}
.header-actions .btn-group {
display: flex;
@@ -252,17 +252,14 @@
}
.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,
.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 */
.page-header {
position: relative;
z-index: 3000;
}
/* Keep page-header in normal stacking order (below modals) */
.page-header { position: relative; z-index: auto; }
/* Responsive sizing for small screens */
@media (max-width: 992px) {