From 855fc5d577ab27911620f8c8dfcd3131cd389ab3 Mon Sep 17 00:00:00 2001 From: Denis Shatskiy Date: Wed, 13 Aug 2025 12:54:04 +0700 Subject: [PATCH] style: Adjust z-index values for dropdowns and page header to maintain proper stacking order below modals, enhancing visibility and usability --- frontend/src/App.css | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 1e31c18..d7bf046 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -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) {