From 8ed0e333130d7bac389a4bd4aff82c5f90f241de Mon Sep 17 00:00:00 2001
From: Pier-Jean Malandrino <pierjean.malandrino@scub.net>
Date: Thu, 2 Apr 2026 16:41:34 +0200
Subject: [PATCH] Compact settings toggles as segmented controls

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.
---
 .../features/settings/ui/SettingsPanel.vue    | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/src/features/settings/ui/SettingsPanel.vue b/frontend/src/features/settings/ui/SettingsPanel.vue
index 356585d..e6739a9 100644
--- a/frontend/src/features/settings/ui/SettingsPanel.vue
+++ b/frontend/src/features/settings/ui/SettingsPanel.vue
@@ -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 {