danvics/docling-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Compact settings toggles as segmented controls

Browse source 
Reduce toggle width to fit-content with inner padding and individual
border-radius, matching the studio tabs design. Narrower max-width
for a tighter settings layout.
This commit is contained in:
Pier-Jean Malandrino 2026-04-02 16:41:34 +02:00
parent e4bbffe258
commit 8ed0e33313
1 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/features/settings/ui/SettingsPanel.vue
View file

@ -40,14 +40,14 @@ const { t } = useI18n()
.settings-panel { .settings-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 24px;
max-width: 500px; max-width: 320px;
} }
.setting-group { .setting-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 8px;
} }
.setting-label { .setting-label {
@ -59,33 +59,36 @@ const { t } = useI18n()
} }
.setting-toggle { .setting-toggle {
display: flex; display: inline-flex;
gap: 2px;
background: var(--bg-elevated); background: var(--bg-elevated);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: hidden; padding: 3px;
width: fit-content;
} }
.setting-toggle button { .setting-toggle button {
flex: 1; padding: 6px 16px;
padding: 8px 16px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: var(--text-secondary); color: var(--text-muted);
background: transparent; background: transparent;
border: none; border: none;
border-radius: calc(var(--radius-sm) - 2px);
cursor: pointer; cursor: pointer;
transition: all var(--transition); transition: all 200ms ease;
} }
.setting-toggle button:hover { .setting-toggle button:hover {
color: var(--text); color: var(--text-secondary);
background: var(--bg-hover); background: var(--bg-hover);
} }
.setting-toggle button.active { .setting-toggle button.active {
background: var(--accent-muted); background: var(--accent-muted);
color: var(--accent); color: var(--accent);
font-weight: 600;
} }
.setting-input { .setting-input {