From bdfbdcfa1fa8a60f8b34984ba2766a0946f959cf Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Wed, 13 Aug 2025 11:05:52 +0700
Subject: [PATCH] style: Elevate z-index for dropdowns and page header to
 ensure proper overlay on content; adjust button attributes for improved
 dropdown behavior

---
 frontend/src/App.css                          | 12 +++++++++---
 frontend/src/components/PageHeaderActions.jsx |  4 ++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 501b6e0..1e31c18 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;
-  z-index: 2500;
+  position: relative; /* creates local stacking context for toolbar controls */
+  z-index: 3000;      /* higher than cards/tables so dropdowns render on top */
 }
 .header-actions .btn-group {
   display: flex;
@@ -255,7 +255,13 @@
 /* Ensure dropdowns in header-actions overlay tables/cards correctly */
 .header-actions .dropdown-menu,
 .page-header .dropdown-menu {
-  z-index: 2000;
+  z-index: 3001; /* slightly above the toolbar itself */
+}
+
+/* Elevate the entire page header above content cards/tables to avoid clipping */
+.page-header {
+  position: relative;
+  z-index: 3000;
 }
 
 /* Responsive sizing for small screens */
diff --git a/frontend/src/components/PageHeaderActions.jsx b/frontend/src/components/PageHeaderActions.jsx
index 327d213..54765a3 100644
--- a/frontend/src/components/PageHeaderActions.jsx
+++ b/frontend/src/components/PageHeaderActions.jsx
@@ -40,7 +40,7 @@ function PageHeaderActions({
             </button>
             {(onBackgroundUpdate && onOnlineUpdate) && (
               <>
-                <button className="btn btn-outline-success dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Другие варианты обновления"></button>
+                <button className="btn btn-outline-success dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" data-bs-container="body" aria-expanded="false" aria-label="Другие варианты обновления"></button>
                 <div className="dropdown-menu">
                   <button className="dropdown-item" type="button" onClick={onBackgroundUpdate}>
                     <IconPlayerPlay className="me-1" /> Фоновое обновление
@@ -63,7 +63,7 @@ function PageHeaderActions({
         )}
         {(onImport || onExport) && (
           <div className="dropdown">
-            <button className="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Импорт/Экспорт">
+            <button className="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-container="body" aria-expanded="false" title="Импорт/Экспорт">
               <IconDownload className="me-1" /> Импорт/Экспорт
             </button>
             <div className="dropdown-menu">