style: Elevate z-index for dropdowns and page header to ensure proper overlay on content; adjust button attributes for improved dropdown behavior
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 19m43s

This commit is contained in:
2025-08-13 11:05:52 +07:00
parent 30fbc1107d
commit bdfbdcfa1f
2 changed files with 11 additions and 5 deletions
+9 -3
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;
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 */
@@ -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">