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
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 19m43s
This commit is contained in:
@@ -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;
|
position: relative; /* creates local stacking context for toolbar controls */
|
||||||
z-index: 2500;
|
z-index: 3000; /* higher than cards/tables so dropdowns render on top */
|
||||||
}
|
}
|
||||||
.header-actions .btn-group {
|
.header-actions .btn-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -255,7 +255,13 @@
|
|||||||
/* Ensure dropdowns in header-actions overlay tables/cards correctly */
|
/* Ensure dropdowns in header-actions overlay tables/cards correctly */
|
||||||
.header-actions .dropdown-menu,
|
.header-actions .dropdown-menu,
|
||||||
.page-header .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 */
|
/* Responsive sizing for small screens */
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ function PageHeaderActions({
|
|||||||
</button>
|
</button>
|
||||||
{(onBackgroundUpdate && onOnlineUpdate) && (
|
{(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">
|
<div className="dropdown-menu">
|
||||||
<button className="dropdown-item" type="button" onClick={onBackgroundUpdate}>
|
<button className="dropdown-item" type="button" onClick={onBackgroundUpdate}>
|
||||||
<IconPlayerPlay className="me-1" /> Фоновое обновление
|
<IconPlayerPlay className="me-1" /> Фоновое обновление
|
||||||
@@ -63,7 +63,7 @@ function PageHeaderActions({
|
|||||||
)}
|
)}
|
||||||
{(onImport || onExport) && (
|
{(onImport || onExport) && (
|
||||||
<div className="dropdown">
|
<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" /> Импорт/Экспорт
|
<IconDownload className="me-1" /> Импорт/Экспорт
|
||||||
</button>
|
</button>
|
||||||
<div className="dropdown-menu">
|
<div className="dropdown-menu">
|
||||||
|
|||||||
Reference in New Issue
Block a user