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