A11y: Polish the dynamic text size feature

- Tab bar: revert title-bar to 27 px, push tab-bar 3 px down via padding-top so the active tab's colored top sits flush below the title-bar at every scale (no negative margin tricks needed).
- Settings window dimensions split into fixed chrome (220 px sidebar + 32 px padding) and scaled content area (`settingsMinWidth(scale)` / `settingsMaxWidth(scale)`). Right edge of content always snaps to right edge of window — no empty zone at large scales, no clipping at small ones. Removed the now-redundant `max-width` on `.settings-content`.
- Slider min-width 120 → 60 so the unit label stays visible in narrow rows.
- Capabilities: add `core:window:allow-set-min-size` and `allow-set-max-size` to `settings.json` so the live `setMinSize` / `setMaxSize` calls actually apply.
- Surface Tauri capability failures as warn logs (`await` + `try`/`catch` instead of `void` fire-and-forget) so missing perms don't fail silently.
- Document the recurring "Tauri feature needs a perm" gotcha in `AGENTS.md` § Critical rules and strengthen the existing note in `capabilities/CLAUDE.md`.

Author: vdavid

AGENTS.md

@@ -176,6 +176,12 @@ resilience, and common pitfalls.
 - When adding a new user-facing action, add it to `command-registry.ts` and `handleCommandExecute` in
   `routes/(main)/command-dispatch.ts`.
 - If you added a new Tauri command touching the filesystem, check `docs/architecture.md` § Platform constraints.
+- ❌ **Tauri APIs fail silently without permissions.** Whenever you call a new Tauri API from a window — `setMinSize`,
+  `setTitle`, `show`, plugin commands, anything new — add the matching permission to that window's capability file in
+  `src-tauri/capabilities/{default,settings,viewer}.json`. Without it, the call rejects with a generic "not allowed"
+  error and your feature looks broken with no obvious cause. Surface failures by `await`-ing the call inside a
+  `try/catch` and logging the error rather than `void`-ing the promise. See `src-tauri/capabilities/CLAUDE.md` for the
+  per-window split and naming conventions.
 - We use [mise](https://mise.jdx.dev/) to manage tool versions (Go, Node, etc.), pinned in `.mise.toml`. Shims are on
   PATH via `~/.bashrc` and `~/.zshenv`, so `go` and `node` should just work. If `go` is "not found", check that
   `~/.local/share/mise/shims` is on `$PATH`.

apps/desktop/src-tauri/capabilities/CLAUDE.md

@@ -28,7 +28,21 @@ for available permission identifiers.
 ## Gotchas
 
 **Gotcha**: Missing permissions fail silently at runtime.
-**Why**: Tauri doesn't crash or warn visibly when a webview calls an API it lacks permission for. The call just returns a generic "not allowed" error. If a new Tauri API call (e.g., `setFocus`, `setTitle`) is added to a window's frontend code, the corresponding permission must be added here or it will silently fail. Check the browser console for "not allowed" errors.
+**Why**: Tauri doesn't crash or warn visibly when a webview calls an API it lacks permission for. The call just rejects its promise with a generic
+`window.set_X not allowed. Permissions associated with this command: core:window:allow-set-X` error.
+If a new Tauri API call (e.g., `setFocus`, `setTitle`, `setMinSize`, `setMaxSize`, plugin commands) is added to a window's frontend code, the matching permission must be added to that window's capability file (`default.json` for the main window, `settings.json` for settings, `viewer.json` for viewer windows). Without it the call rejects with no UI feedback — the feature just looks broken.
+
+**Mitigation pattern**: any Tauri call that affects the UI shape should be `await`-ed inside `try/catch` with a `log.warn` on failure, never `void`-ed. The instant failure log is what catches missing permissions during development before the user does. Pattern:
+
+```typescript
+try {
+  await win.setMaxSize(maxSize)
+} catch (e) {
+  log.warn('setMaxSize failed: {error}', { error: String(e) })
+}
+```
+
+This same pattern caught the missing `core:window:allow-set-min-size` / `allow-set-max-size` permissions when `routes/settings/+page.svelte` started using them for live text-size resizing — see `AGENTS.md` § Critical rules for the higher-level callout.
 
 **Gotcha**: `opener:allow-open-path` needs explicit glob patterns for hidden files.
 **Why**: The default `opener:allow-open-path` permission doesn't match dotfiles. The `"**/*"` glob excludes files starting with `.`, so a separate `"**/.*"` pattern is required. Without it, opening hidden files from the file manager would silently fail.

apps/desktop/src-tauri/capabilities/settings.json

@@ -8,6 +8,8 @@
     "permissions": [
         "core:window:allow-close",
         "core:window:allow-set-focus",
+        "core:window:allow-set-min-size",
+        "core:window:allow-set-max-size",
         "core:event:default",
         "core:app:allow-set-app-theme",
         "core:webview:allow-internal-toggle-devtools",

apps/desktop/src/lib/file-explorer/tabs/TabBar.svelte

@@ -143,12 +143,20 @@
     .tab-bar {
         display: flex;
         align-items: end;
-        height: var(--spacing-tab-bar-height);
-        min-height: var(--spacing-tab-bar-height);
-        max-height: var(--spacing-tab-bar-height);
+        /* Total height = scaled tab band + 3 px non-scaled top spacer.
+         * The spacer is bg-secondary (same as the bar), so it visually reads
+         * as a slim continuation of the (fixed-height) window title-bar above.
+         * Tabs anchor to the bar's content-area bottom (align-items: end);
+         * with `box-sizing: border-box`, the padding-top reduces the content
+         * area to exactly `--spacing-tab-bar-height`, so the colored top edge
+         * of the active tab sits 3 px below the title-bar at every scale. */
+        height: calc(var(--spacing-tab-bar-height) + 3px);
+        min-height: calc(var(--spacing-tab-bar-height) + 3px);
+        max-height: calc(var(--spacing-tab-bar-height) + 3px);
         background-color: var(--color-bg-secondary);
         border-bottom: 1px solid var(--color-border);
-        padding: 0 var(--spacing-xxs);
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list -- 3px is a deliberate non-scaling visual offset, no spacing token fits */
+        padding: 3px var(--spacing-xxs) 0;
         overflow: hidden;
     }
 
@@ -170,12 +178,11 @@
         min-width: 32px;
         max-width: 180px;
         flex: 1 1 0;
-        /* Scales with --font-scale so the colored top of the active tab stays
-         * flush below the (fixed-height) window title-bar at every scale.
-         * Without this, the bar grew but the tab kept a fixed 24px height,
-         * pushing the colored top down at large scales / behind the title-bar
-         * at small scales. */
-        height: calc(24px * var(--font-scale));
+        /* Tabs fill the entire bar height. With `.tab-bar { align-items: end }`
+         * and the tab matching the bar height, the colored top edge of the
+         * active tab is always at the bar's top — flush below the (fixed)
+         * window title-bar at every text scale. */
+        height: var(--spacing-tab-bar-height);
         padding: 0 var(--spacing-sm);
         border: none;
         border-radius: var(--radius-sm) var(--radius-sm) 0 0;
@@ -207,9 +214,9 @@
         background-color: color-mix(in oklch, var(--color-bg-primary), var(--color-accent) 4%);
         color: var(--color-text-primary);
         font-weight: 500;
-        /* Scales with --font-scale; mirrors `.tab { height }` plus 1px to cover
-         * the tab-bar bottom border. */
-        height: calc(25px * var(--font-scale));
+        /* Bar height + 1px so the active tab covers the tab-bar bottom border;
+         * the extra px hangs below via `margin-bottom: -1px`. */
+        height: calc(var(--spacing-tab-bar-height) + 1px);
         /* stylelint-disable-next-line declaration-property-value-disallowed-list */
         margin-bottom: -1px;
         z-index: 1;

apps/desktop/src/lib/settings/components/SettingSlider.svelte

@@ -129,10 +129,13 @@
         width: 100%;
     }
 
-    /* The root needs explicit sizing for Ark UI slider to work */
+    /* The root needs explicit sizing for Ark UI slider to work.
+     * `min-width: 60px` lets the track shrink in narrow rows so the unit
+     * label after the number input still fits. The thumb stays interactive
+     * down to that floor; below it Ark UI handles the cramped layout. */
     :global(.slider-root) {
         flex: 1;
-        min-width: 120px;
+        min-width: 60px;
     }
 
     :global(.slider-control) {

apps/desktop/src/lib/settings/components/SettingsContent.svelte

@@ -76,7 +76,7 @@
     }
 </script>
 
-<div class="settings-content">
+<div>
     <!-- Summary pages for top-level sections -->
     {#if showSummary}
         <SectionSummary sectionName={selectedSection[0]} onNavigate={handleNavigate} />
@@ -185,9 +185,11 @@
 </div>
 
 <style>
-    .settings-content {
-        max-width: 600px;
-    }
+    /* No content max-width: settings rows fill the wrapper, which is window
+     * width minus the fixed sidebar (220 px) and content padding (32 px).
+     * Window min/max in `lib/settings/settings-window.ts` make the available
+     * content area scale proportionally with text size, so the right edge of
+     * the content always snaps to the right edge of the window. */
 
     section {
         margin-bottom: var(--spacing-lg);

apps/desktop/src/lib/settings/settings-window.ts

@@ -2,11 +2,19 @@
  * Settings window management.
  * Creates and manages the settings window as a separate Tauri window.
  *
- * Dimensions scale with the user's effective text size: at 100% the values
- * below are the literal pixel dimensions; at 200% everything is doubled.
- * This keeps all settings rows visible and proportional. The settings page
- * itself updates `setMinSize`/`setMaxSize` live when the user moves the
- * slider — see `routes/settings/+page.svelte`.
+ * **Sizing model.** Width has two parts:
+ *
+ *   window_width = chrome (fixed) + content_area (scales with text size)
+ *
+ * The chrome covers the fixed-width sidebar (220 px) plus the content
+ * wrapper's horizontal padding (16 px each side = 32 px). Whatever the text
+ * scale, those values stay constant — only the readable content area scales,
+ * so a row reads with the same proportions at every size. Height scales
+ * fully (no fixed-height chrome inside).
+ *
+ * The settings page (`routes/settings/+page.svelte`) updates `setMinSize` /
+ * `setMaxSize` live when the user moves the slider so the constraints track
+ * the new scale. See that file for the live-update logic.
  */
 
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
@@ -16,13 +24,29 @@ import { getEffectiveScale } from '$lib/text-size.svelte'
 
 const log = getAppLogger('settings')
 
-/** Base dimensions at scale = 1 (the historical hard-coded values). */
-export const SETTINGS_BASE_WIDTH = 800
+/**
+ * Fixed-width chrome that does NOT scale with text size:
+ *   - Sidebar: 220 px (`.settings-sidebar { width: 220px }`)
+ *   - Content wrapper padding: `var(--spacing-lg)` × 2 = 32 px
+ *
+ * Keep in sync with `routes/settings/+page.svelte`'s `.settings-sidebar` and
+ * `.settings-content-wrapper` rules.
+ */
+export const SETTINGS_CHROME_WIDTH = 252
+
+/** Content-area width at scale = 1. Window total = chrome + content × scale. */
+export const SETTINGS_CONTENT_BASE_MIN_WIDTH = 348
+export const SETTINGS_CONTENT_BASE_MAX_WIDTH = 600
+
+/** Height scales fully — no fixed-height chrome inside the settings layout. */
 export const SETTINGS_BASE_HEIGHT = 600
-export const SETTINGS_BASE_MAX_WIDTH = 852
-export const SETTINGS_BASE_MIN_WIDTH = 600
 export const SETTINGS_BASE_MIN_HEIGHT = 400
 
+export const settingsMinWidth = (scale: number): number =>
+  SETTINGS_CHROME_WIDTH + SETTINGS_CONTENT_BASE_MIN_WIDTH * scale
+export const settingsMaxWidth = (scale: number): number =>
+  SETTINGS_CHROME_WIDTH + SETTINGS_CONTENT_BASE_MAX_WIDTH * scale
+
 /**
  * Opens the settings window, or focuses it if already open. When `section` is provided,
  * the settings window listens for the `navigate-to-section` event and scrolls/highlights
@@ -49,11 +73,13 @@ export async function openSettingsWindow(section?: string[]): Promise<void> {
   new WebviewWindow('settings', {
     url: section ? `/settings?section=${encodeURIComponent(JSON.stringify(section))}` : '/settings',
     title: 'Settings',
-    width: SETTINGS_BASE_WIDTH * scale,
+    // Open at max width so the content-area starts at its scaled cap; user can
+    // shrink down to `settingsMinWidth(scale)`.
+    width: settingsMaxWidth(scale),
     height: SETTINGS_BASE_HEIGHT * scale,
-    minWidth: SETTINGS_BASE_MIN_WIDTH * scale,
+    minWidth: settingsMinWidth(scale),
     minHeight: SETTINGS_BASE_MIN_HEIGHT * scale,
-    maxWidth: SETTINGS_BASE_MAX_WIDTH * scale,
+    maxWidth: settingsMaxWidth(scale),
     center: true,
     resizable: true,
     decorations: true,

apps/desktop/src/routes/settings/+page.svelte

@@ -8,11 +8,7 @@
     import { initializeShortcuts, flushPendingSave as flushShortcutsSave } from '$lib/shortcuts'
     import { initAccentColor, cleanupAccentColor } from '$lib/accent-color'
     import { initTextSize, cleanupTextSize, getEffectiveScale } from '$lib/text-size.svelte'
-    import {
-        SETTINGS_BASE_MAX_WIDTH,
-        SETTINGS_BASE_MIN_HEIGHT,
-        SETTINGS_BASE_MIN_WIDTH,
-    } from '$lib/settings/settings-window'
+    import { SETTINGS_BASE_MIN_HEIGHT, settingsMaxWidth, settingsMinWidth } from '$lib/settings/settings-window'
     import { getMatchingSections } from '$lib/settings/settings-search'
     import { loadLastSettingsSection, saveLastSettingsSection } from '$lib/app-status-store'
     import { getAppLogger } from '$lib/logging/logger'
@@ -45,20 +41,35 @@
     /**
      * Settings-window dimensions track the effective text scale: at 100% the
      * base values match the historical layout; at other scales the min/max
-     * grow proportionally so all rows stay visible. Tauri has no
-     * "no max height" knob — we set a very large value (50_000 logical px)
-     * which is effectively unbounded for practical use.
+     * grow proportionally so all rows stay visible. Tauri has no "no max
+     * height" knob — we set a very large value (50_000 logical px) which is
+     * effectively unbounded for practical use.
+     *
+     * Standard NSWindow clamping behavior: when the new constraints leave the
+     * current frame out of bounds, macOS clamps it to fit. Otherwise the
+     * frame stays where the user put it. The `appearance.textSize` slider
+     * itself debounces re-measurement, so the window doesn't thrash.
      *
      * Reading `getEffectiveScale()` inside `$effect` makes this re-run on
      * every scale change (system Accessibility settle or user slider move).
      */
     $effect(() => {
         const scale = getEffectiveScale()
         const win = getCurrentWindow()
-        const minSize = new LogicalSize(SETTINGS_BASE_MIN_WIDTH * scale, SETTINGS_BASE_MIN_HEIGHT * scale)
-        const maxSize = new LogicalSize(SETTINGS_BASE_MAX_WIDTH * scale, 50_000)
-        void win.setMinSize(minSize)
-        void win.setMaxSize(maxSize)
+        const minSize = new LogicalSize(settingsMinWidth(scale), SETTINGS_BASE_MIN_HEIGHT * scale)
+        const maxSize = new LogicalSize(settingsMaxWidth(scale), 50_000)
+        // Awaited rather than fire-and-forget so a missing capability surfaces
+        // as a warn log instead of silently swallowing the rejection. Tauri
+        // rejects without these perms in `capabilities/settings.json`:
+        // `core:window:allow-set-min-size`, `core:window:allow-set-max-size`.
+        void (async () => {
+            try {
+                await win.setMinSize(minSize)
+                await win.setMaxSize(maxSize)
+            } catch (e) {
+                log.warn('Settings window setMinSize/setMaxSize failed: {error}', { error: String(e) })
+            }
+        })()
     })
 
     // Handle search input