f9641ec76e
Adds dark-theme CSS styling for the inline Thinking Level <select> so it no longer renders as an OS-default white control across model-picker surfaces, including the quick-add QuickEntryBox and InlineCreateCard popups. - Add .thinking-level-select rule set in CustomModelDropdown.css mirroring the canonical dark select tokens (background, border, color, focus ring, disabled state, option/optgroup styling) - Add a custom dropdown chevron indicator via .model-combobox-thinking::after and make the container position: relative - Add a regression test asserting the select and option rules use the dark theme CSS tokens - Add a patch changeset for @runfusion/fusion documenting the fix Files changed: .changeset/fn-7774-thinking-level-select-styling.md | 7 +++ packages/dashboard/app/components/CustomModelDropdown.css | 59 ++++++++++++++++++++++ packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx | 16 ++++++ 3 files changed, 82 insertions(+) Fusion-Task-Id: FN-7774 Fusion-Task-Lineage: 9ef9bf07-dd18-499c-b04d-1b137d200689 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
414 lines
9.2 KiB
CSS
414 lines
9.2 KiB
CSS
/* === Model Combobox Component === */
|
|
|
|
.model-combobox {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.model-combobox-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.model-combobox-trigger:hover:not(:disabled) {
|
|
border-color: var(--text-dim);
|
|
}
|
|
|
|
.model-combobox-trigger:focus {
|
|
border-color: var(--todo);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.model-combobox-trigger:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.model-combobox-trigger-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
|
|
.model-combobox-trigger-icon {
|
|
display: inline-flex;
|
|
margin-right: var(--space-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.model-combobox-trigger-arrow {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
margin-left: 8px;
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
.model-combobox-trigger[aria-expanded="true"] .model-combobox-trigger-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.model-combobox-dropdown {
|
|
position: fixed;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
/* Must sit above floating dashboard panels and the shared floating-window stack (10100+). */
|
|
z-index: 11000;
|
|
max-height: 320px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.model-combobox-search-wrapper {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.model-combobox-search {
|
|
width: 100%;
|
|
padding: 10px 36px 10px 12px;
|
|
background: var(--bg);
|
|
border: none;
|
|
border-radius: var(--radius) var(--radius) 0 0;
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
.model-combobox-search::placeholder {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.model-combobox-search:focus {
|
|
background: var(--card);
|
|
}
|
|
|
|
.model-combobox-clear {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.model-combobox-clear:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.model-combobox-results-count {
|
|
flex-shrink: 0;
|
|
padding: 6px 12px;
|
|
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
|
color: var(--text-muted);
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.model-combobox-thinking {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
flex-shrink: 0;
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.model-combobox-thinking-label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.model-combobox-thinking-select {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/*
|
|
FNXC:Settings-ThinkingLevel 2026-07-10-00:00:
|
|
The inline Thinking Level <select> had no CSS and rendered as the OS-default white control on the dark model dropdown across all model-picker surfaces, including the quick-add QuickEntryBox executor submenu and InlineCreateCard ModelSelectionModal. Mirror the canonical dark select tokens so reasoning-effort selection matches the surrounding combobox everywhere.
|
|
*/
|
|
.model-combobox .thinking-level-select {
|
|
width: 100%;
|
|
padding: var(--space-xs) calc(var(--space-lg) + var(--space-md)) var(--space-xs) var(--space-sm);
|
|
background: var(--surface);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text);
|
|
font-size: var(--font-size-sm);
|
|
font-family: var(--font-primary);
|
|
line-height: 1.4;
|
|
outline: none;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.model-combobox .thinking-level-select:hover:not(:focus):not(:disabled) {
|
|
border-color: var(--text-dim);
|
|
}
|
|
|
|
.model-combobox .thinking-level-select:focus {
|
|
border-color: var(--todo);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.model-combobox .thinking-level-select:disabled {
|
|
opacity: var(--opacity-disabled, 0.6);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.model-combobox .thinking-level-select option {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
}
|
|
|
|
.model-combobox .thinking-level-select optgroup {
|
|
background: var(--surface);
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.model-combobox-thinking::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: calc(var(--space-md) + var(--space-sm));
|
|
width: var(--space-xs);
|
|
height: var(--space-xs);
|
|
border: solid var(--text-muted);
|
|
border-width: 0 var(--btn-border-width) var(--btn-border-width) 0;
|
|
pointer-events: none;
|
|
transform: rotate(45deg) translateY(calc(var(--space-xs) * -1));
|
|
}
|
|
|
|
.model-combobox-thinking-badge {
|
|
flex-shrink: 0;
|
|
margin-left: var(--space-sm);
|
|
max-width: 45%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/*
|
|
FNXC:ModelDropdown 2026-07-09-00:00:
|
|
FN-7760 requires the portaled model list to remain the touch-scroll owner on mobile. The global mobile lockdown keeps body/root overflow hidden and defaults touch gestures to vertical panning, so this fixed-position scroller needs its own iOS momentum scrolling, contained overscroll, and explicit vertical pan contract.
|
|
*/
|
|
.model-combobox-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior: contain;
|
|
touch-action: pan-y;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.model-combobox-option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-sm) var(--space-md);
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.model-combobox-option:hover,
|
|
.model-combobox-option--highlighted {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.model-combobox-option--selected {
|
|
background: color-mix(in srgb, var(--todo) 15%, transparent);
|
|
}
|
|
|
|
.model-combobox-option--selected:hover,
|
|
.model-combobox-option--selected.model-combobox-option--highlighted {
|
|
background: color-mix(in srgb, var(--todo) 25%, transparent);
|
|
}
|
|
|
|
.model-combobox-option-main {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.model-combobox-option-icon {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.model-combobox-option-text {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.model-combobox-option-text--default {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.model-combobox-option-id {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
font-family: var(--font-mono);
|
|
margin-left: 8px;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 40%;
|
|
}
|
|
|
|
.model-combobox-group {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.model-combobox-group:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.model-combobox-optgroup {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-muted);
|
|
background: var(--bg);
|
|
cursor: default;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.model-combobox-optgroup-text {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Provider favorite star (in optgroup header) */
|
|
.model-combobox-optgroup-favorite {
|
|
padding: 2px 4px;
|
|
font-size: 14px;
|
|
color: var(--star-idle);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
.model-combobox-optgroup-favorite:hover {
|
|
color: var(--star-active);
|
|
}
|
|
.model-combobox-optgroup-favorite--active {
|
|
color: var(--star-active);
|
|
}
|
|
|
|
/* Model favorite star (inside option row) */
|
|
.model-combobox-option-favorite {
|
|
padding: 2px 4px;
|
|
font-size: 12px;
|
|
color: var(--star-idle);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
.model-combobox-option-favorite:hover {
|
|
color: var(--star-active);
|
|
}
|
|
.model-combobox-option-favorite--active {
|
|
color: var(--star-active);
|
|
}
|
|
|
|
/* Favorited model pinned row */
|
|
.model-combobox-option--favorite {
|
|
padding-left: 12px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.model-combobox-divider {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.model-combobox-no-results {
|
|
padding: 16px 12px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Mobile responsive model dropdown */
|
|
@media (max-width: 768px) {
|
|
.model-combobox-dropdown {
|
|
max-height: 50vh;
|
|
max-height: 50dvh; /* Use dynamic viewport height where supported */
|
|
width: min(360px, calc(100vw - 32px));
|
|
}
|
|
|
|
.model-combobox-search {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.model-combobox-option {
|
|
min-height: 36px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.model-combobox-dropdown {
|
|
max-height: 50vh;
|
|
max-height: 50dvh;
|
|
width: min(360px, calc(100vw - 32px));
|
|
}
|
|
}
|
|
|