fix(settings): restore compact save action chip

apps/electron-backend-e2e/src/settings-layout.e2e.ts

@@ -0,0 +1,46 @@
+import {
+    closeElectronApp,
+    expect,
+    launchElectronApp,
+    openSettings,
+    test,
+} from './electron-test-fixtures';
+
+test.describe('Electron Settings Layout', () => {
+    test('@settings @electron keeps the save action in a compact floating chip', async ({
+        dataDir,
+    }) => {
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await openSettings(app.mainWindow);
+
+            const layout = app.mainWindow.locator('.settings-layout');
+            const actionBar = app.mainWindow.getByTestId('settings-action-bar');
+            await expect(layout).toBeVisible();
+            await expect(actionBar).toBeVisible();
+
+            const [layoutBox, actionBarBox] = await Promise.all([
+                layout.evaluate((element) => {
+                    const { width, x } = element.getBoundingClientRect();
+                    return { width, x };
+                }),
+                actionBar.evaluate((element) => {
+                    const { width, x } = element.getBoundingClientRect();
+                    return { width, x };
+                }),
+            ]);
+
+            expect(actionBarBox.width).toBeLessThan(layoutBox.width / 2);
+            expect(
+                Math.abs(
+                    layoutBox.x +
+                        layoutBox.width -
+                        (actionBarBox.x + actionBarBox.width)
+                )
+            ).toBeLessThanOrEqual(2);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});

apps/web/src/_settings-theme.scss

@@ -1,19 +1,9 @@
 .settings-container {
     --settings-safe-bottom: env(safe-area-inset-bottom, 0px);
-    // Action bar is a full-width sticky footer, so it sits flush against
-    // the bottom edge of the scroll container — no hover offset. The
-    // previous 24px gap was tuned for the old floating-chip layout where
-    // the bar visually hovered above the bottom.
-    --settings-action-bar-offset: 0px;
-    // 0 by default — the action bar is now the last child of the form
-    // and acts as the natural bottom edge, so no padding-bottom is
-    // needed below it. The previous 112px/80px reservation existed to
-    // push content above the OLD floating-chip layout, but in the new
-    // sticky-footer model that just added dead scrollable space below
-    // the last setting row. The bar's own padding (12px) and the
-    // section title bottom-borders already provide visual breathing
-    // room when scrolled to the end.
-    --settings-action-bar-space: 0px;
+    // Keep the floating action chip clear of the window edge and reserve
+    // enough scroll space so it never covers the final settings row.
+    --settings-action-bar-offset: 24px;
+    --settings-action-bar-space: 112px;
     --settings-page-header-bg: color-mix(
         in srgb,
         var(--mat-sys-surface-container-low) 94%,

apps/web/src/app/settings/settings.component.scss

@@ -738,31 +738,23 @@
     );
 }
 
-// Sticky-footer Save bar — full content width so it never overlaps form
-// rows. The previous chip-style bar (border-radius:18px, margin-left:auto)
-// floated in the bottom-right corner and clipped fields underneath; the
-// UX audit called this out as the worst of three available patterns.
-// Now the bar acts as a proper footer: spans the column, separator line
-// on top, sits flush with the bottom edge while still sticking on scroll.
+// Compact sticky action chip. The settings layout reserves space below the
+// content so this remains visible without covering the final form rows.
 .action-bar {
     position: sticky;
     bottom: calc(
         var(--settings-action-bar-offset) + var(--settings-safe-bottom)
     );
-    margin-left: 0;
-    margin-right: 0;
+    margin-left: auto;
     z-index: 100;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
-    padding: 12px 18px;
-    border-top: 1px solid var(--settings-action-bar-border);
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 0;
-    border-radius: 0;
+    padding: 10px 14px;
+    border: 1px solid var(--settings-action-bar-border);
+    border-radius: 18px;
     background: var(--settings-action-bar-bg);
     backdrop-filter: blur(12px);
     box-shadow: var(--settings-action-bar-shadow);
@@ -775,7 +767,6 @@
     box-shadow: none;
     border-radius: 16px;
     padding: 12px;
-    border-top: 1px solid var(--settings-action-bar-border);
     justify-content: space-between;
 }