19d60480db
Ensure the Command Center theme selector renders above neighboring views while preserving mobile in-flow behavior. - Add an open state class to the theme dropdown root for local stacking control. - Raise the open dropdown and popover above Command Center sibling cards without exceeding app chrome layers. - Cover desktop elevation and mobile static popover behavior in ThemeDropdown tests. Files changed: .../dashboard/app/components/ThemeDropdown.css | 15 +++++++- .../dashboard/app/components/ThemeDropdown.tsx | 2 +- .../components/__tests__/ThemeDropdown.test.tsx | 40 ++++++++++++++++++++++ 3 files changed, 55 insertions(+), 2 deletions(-) Fusion-Task-Id: FN-6826 Fusion-Task-Lineage: ff43c06e-f3a7-4b4c-8e29-46deb66e9145
110 lines
2.4 KiB
CSS
110 lines
2.4 KiB
CSS
.theme-dropdown {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
/*
|
|
FNXC:Theme 2026-06-20-00:00:
|
|
FN-6826 requires the Command Center theme dropdown to paint on top of all sibling Command Center cards/views only while open. Use a local dropdown-tier z-index above DateRangePicker's 20 and below app chrome/mobile nav tiers, then reset it in the mobile in-flow branch so closed or static content never floats above unrelated chrome.
|
|
*/
|
|
.theme-dropdown.open {
|
|
z-index: 40;
|
|
}
|
|
|
|
.theme-dropdown-trigger {
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.theme-dropdown-trigger .theme-option-swatch,
|
|
.theme-dropdown-option .theme-option-swatch {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.theme-dropdown-trigger-label,
|
|
.theme-dropdown-option-label {
|
|
min-inline-size: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.theme-dropdown-modes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.theme-dropdown-mode-btn {
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.theme-dropdown-mode-btn.active {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.theme-dropdown-popover {
|
|
position: absolute;
|
|
z-index: 40;
|
|
inset-block-start: calc(100% + var(--space-xs));
|
|
inset-inline: 0;
|
|
padding: var(--space-sm);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-1);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.theme-dropdown-list {
|
|
display: grid;
|
|
gap: var(--space-xs);
|
|
max-block-size: min(60vh, calc(var(--space-2xl) * 12));
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.theme-dropdown-option {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
inline-size: 100%;
|
|
padding: var(--space-sm);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
text-align: start;
|
|
}
|
|
|
|
.theme-dropdown-option:hover,
|
|
.theme-dropdown-option:focus-visible,
|
|
.theme-dropdown-option.active {
|
|
border-color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.theme-dropdown.open {
|
|
z-index: auto;
|
|
}
|
|
|
|
.theme-dropdown-popover {
|
|
position: static;
|
|
z-index: auto;
|
|
margin-block-start: var(--space-xs);
|
|
}
|
|
|
|
.theme-dropdown-list {
|
|
max-block-size: min(50vh, calc(var(--space-2xl) * 10));
|
|
}
|
|
}
|