Brief mode: User setting for max column width

- New `listing.briefColumnWidthMode` setting (radio): `paneWidth` (default) lets columns fill the pane; `limited` caps them at a user-chosen pixel value.
- New `listing.briefColumnWidthMaxPx` setting (slider, 250-1000 px, default 400): the cap value, disabled when mode is `paneWidth`.
- Replaces the hardcoded `MAX_BRIEF_COLUMN_WIDTH = 300` constant in `BriefList.svelte` with a reactive `capPx = min(containerWidth, userCap)` derivation. Container width is always the outer ceiling — a column wider than the pane is never useful.
- Description text explains the min-with-pane-width behavior so the slider's role is clear.
- Wired through `reactive-settings.svelte.ts` (new `BriefColumnWidthMode` type, getters, change subscriptions) and rendered in `ListingSection.svelte` as one row: radio + slider stacked, slider visually nested and disabled when mode is `paneWidth`.
- `BriefList.a11y.test.ts` mock updated for the two new exports.

Author: vdavid

apps/desktop/src/lib/file-explorer/views/BriefList.a11y.test.ts

@@ -44,6 +44,8 @@ vi.mock('$lib/settings/reactive-settings.svelte', () => ({
   getStripedRows: () => false,
   getHumanFriendlySizeUnits: () => false,
   getFileSizeFormat: () => 'binary',
+  getBriefColumnWidthMode: () => 'paneWidth',
+  getBriefColumnWidthMaxPx: () => 400,
 }))
 
 vi.mock('$lib/settings/settings-store', () => ({

apps/desktop/src/lib/file-explorer/views/BriefList.svelte

@@ -23,7 +23,14 @@
     import { ensureFontMetricsLoaded, getCurrentFontId } from '$lib/font-metrics'
     import { getDirStatsBatch } from '$lib/tauri-commands'
     import { buildDirSizeTooltip, hasSizeMismatch } from './full-list-utils'
-    import { getRowHeight, formatFileSize, getSizeMismatchWarning, getStripedRows } from '$lib/settings/reactive-settings.svelte'
+    import {
+        getRowHeight,
+        formatFileSize,
+        getSizeMismatchWarning,
+        getStripedRows,
+        getBriefColumnWidthMode,
+        getBriefColumnWidthMaxPx,
+    } from '$lib/settings/reactive-settings.svelte'
     import { onDebouncedScaleChange } from '$lib/text-size.svelte'
     import { getSetting } from '$lib/settings/settings-store'
     import { formatNumber, pluralize } from '../selection/selection-info-utils'
@@ -119,8 +126,6 @@
     // Buffer columns is reactive based on settings
     const bufferColumns = $derived(getSetting('advanced.virtualizationBufferColumns'))
     const MIN_COLUMN_WIDTH = 100
-    /** Hard cap for any single Brief column. Container width may further clamp this. */
-    const MAX_BRIEF_COLUMN_WIDTH = 300
     // Add space for: icon (16px) + gap (8px) + left padding (8px) + right padding (8px) + rounding buffer (2px)
     // The 2px buffer accounts for sub-pixel rendering differences between calculated and actual widths.
     const COLUMN_PADDING = 16 + 8 + 8 + 8 + 2
@@ -147,13 +152,18 @@
     const totalColumns = $derived(Math.ceil(totalCount / itemsPerColumn))
 
     /**
-     * Cap applied to each column AFTER chrome is added. Tracks live container size,
-     * with a hard ceiling at `MAX_BRIEF_COLUMN_WIDTH` so absurdly wide panes still
-     * cap a column at a readable width.
+     * Cap applied to each column AFTER chrome is added.
+     *
+     * - 'paneWidth' mode (default): columns can grow to fill the pane.
+     * - 'limited' mode: columns also can't exceed the user-chosen pixel cap.
+     *
+     * `containerWidth` is always the outer ceiling — a column wider than the pane has no value.
      */
-    const capPx = $derived(
-        containerWidth > 0 ? Math.min(containerWidth, MAX_BRIEF_COLUMN_WIDTH) : MAX_BRIEF_COLUMN_WIDTH,
-    )
+    const capPx = $derived.by(() => {
+        const userCap = getBriefColumnWidthMode() === 'limited' ? getBriefColumnWidthMaxPx() : Number.POSITIVE_INFINITY
+        if (containerWidth <= 0) return Math.min(userCap, 1000)
+        return Math.min(containerWidth, userCap)
+    })
 
     /**
      * Running cumulative width totals: `prefixSums[i] = sum(widths[0..i))`.

apps/desktop/src/lib/settings/index.ts

@@ -13,6 +13,7 @@ export type {
   EnumOption,
   DirectorySortMode,
   SizeDisplayMode,
+  BriefColumnWidthMode,
   ExtensionChangePolicy,
   FileSizeFormat,
   NetworkTimeoutMode,

apps/desktop/src/lib/settings/reactive-settings.svelte.ts

@@ -12,6 +12,7 @@ import {
   type FileSizeFormat,
   type DirectorySortMode,
   type SizeDisplayMode,
+  type BriefColumnWidthMode,
   type AppColor,
   densityMappings,
 } from '$lib/settings'
@@ -34,6 +35,8 @@ let sizeDisplay = $state<SizeDisplayMode>('smart')
 let humanFriendlySizeUnits = $state<boolean>(true)
 let sizeMismatchWarning = $state<boolean>(true)
 let stripedRows = $state<boolean>(false)
+let briefColumnWidthMode = $state<BriefColumnWidthMode>('paneWidth')
+let briefColumnWidthMaxPx = $state<number>(400)
 let networkEnabled = $state<boolean>(true)
 let typeToJumpResetDelay = $state<number>(1000)
 
@@ -63,6 +66,8 @@ export async function initReactiveSettings(): Promise<void> {
     humanFriendlySizeUnits = getSetting('listing.humanFriendlySizeUnits')
     sizeMismatchWarning = getSetting('listing.sizeMismatchWarning')
     stripedRows = getSetting('listing.stripedRows')
+    briefColumnWidthMode = getSetting('listing.briefColumnWidthMode')
+    briefColumnWidthMaxPx = getSetting('listing.briefColumnWidthMaxPx')
     networkEnabled = getSetting('network.enabled')
     typeToJumpResetDelay = getSetting('fileExplorer.typeToJump.resetDelay')
 
@@ -106,6 +111,12 @@ export async function initReactiveSettings(): Promise<void> {
         case 'listing.stripedRows':
           stripedRows = value as boolean
           break
+        case 'listing.briefColumnWidthMode':
+          briefColumnWidthMode = value as BriefColumnWidthMode
+          break
+        case 'listing.briefColumnWidthMaxPx':
+          briefColumnWidthMaxPx = value as number
+          break
         case 'network.enabled':
           networkEnabled = value as boolean
           break
@@ -206,6 +217,16 @@ export function getStripedRows(): boolean {
   return stripedRows
 }
 
+/** Get the Brief mode column-width mode: 'paneWidth' lets columns fill the pane; 'limited' caps them at `getBriefColumnWidthMaxPx`. */
+export function getBriefColumnWidthMode(): BriefColumnWidthMode {
+  return briefColumnWidthMode
+}
+
+/** Get the Brief mode column-width pixel limit (applies only when mode is 'limited'). */
+export function getBriefColumnWidthMaxPx(): number {
+  return briefColumnWidthMaxPx
+}
+
 /** Get whether networking (SMB discovery + connections) is enabled. */
 export function getNetworkEnabled(): boolean {
   return networkEnabled

apps/desktop/src/lib/settings/sections/ListingSection.svelte

@@ -3,8 +3,11 @@
     import SettingRow from '../components/SettingRow.svelte'
     import SettingToggleGroup from '../components/SettingToggleGroup.svelte'
     import SettingSwitch from '../components/SettingSwitch.svelte'
+    import SettingRadioGroup from '../components/SettingRadioGroup.svelte'
+    import SettingSlider from '../components/SettingSlider.svelte'
     import { getSettingDefinition } from '$lib/settings'
     import { createShouldShow } from '$lib/settings/settings-search'
+    import { getBriefColumnWidthMode } from '$lib/settings/reactive-settings.svelte'
 
     interface Props {
         searchQuery: string
@@ -22,6 +25,9 @@
     }
     const sizeMismatchDef = getSettingDefinition('listing.sizeMismatchWarning') ?? { label: '', description: '' }
     const stripedRowsDef = getSettingDefinition('listing.stripedRows') ?? { label: '', description: '' }
+    const briefWidthModeDef = getSettingDefinition('listing.briefColumnWidthMode') ?? { label: '', description: '' }
+
+    const sliderDisabled = $derived(getBriefColumnWidthMode() !== 'limited')
 </script>
 
 <SettingsSection title="Listing">
@@ -75,4 +81,37 @@
             <SettingSwitch id="listing.stripedRows" />
         </SettingRow>
     {/if}
+    {#if shouldShow('listing.briefColumnWidthMode')}
+        <SettingRow
+            id="listing.briefColumnWidthMode"
+            label={briefWidthModeDef.label}
+            description={briefWidthModeDef.description}
+            {searchQuery}
+        >
+            <div class="brief-width-control">
+                <SettingRadioGroup id="listing.briefColumnWidthMode" />
+                <div class="slider-row" class:is-disabled={sliderDisabled}>
+                    <SettingSlider id="listing.briefColumnWidthMaxPx" unit="px" disabled={sliderDisabled} />
+                </div>
+            </div>
+        </SettingRow>
+    {/if}
 </SettingsSection>
+
+<style>
+    .brief-width-control {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-sm);
+        width: 100%;
+    }
+
+    .slider-row {
+        /* Visually nests the slider under the radio choices. */
+        padding-left: var(--spacing-xl);
+    }
+
+    .slider-row.is-disabled {
+        opacity: 0.5;
+    }
+</style>

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

@@ -233,6 +233,40 @@ export const settingsRegistry: SettingDefinition[] = [
     component: 'switch',
   },
 
+  {
+    id: 'listing.briefColumnWidthMode',
+    section: ['General', 'Listing'],
+    label: 'Maximum column width in Brief mode',
+    description:
+      'Limits how wide Brief mode columns can grow to fit long filenames. Columns are always capped at the pane width regardless — the chosen limit only kicks in when it would be smaller than the pane.',
+    keywords: ['brief', 'column', 'width', 'max', 'maximum', 'limit', 'pane', 'shrink-wrap'],
+    type: 'enum',
+    default: 'paneWidth',
+    component: 'radio',
+    constraints: {
+      options: [
+        { value: 'paneWidth', label: 'Pane width (no limit)' },
+        { value: 'limited', label: 'Limit to' },
+      ],
+    },
+  },
+  {
+    id: 'listing.briefColumnWidthMaxPx',
+    section: ['General', 'Listing'],
+    label: 'Brief column width limit',
+    description: '',
+    keywords: ['brief', 'column', 'width', 'max', 'maximum', 'limit', 'pixel', 'slider'],
+    type: 'number',
+    default: 400,
+    component: 'slider',
+    constraints: {
+      min: 250,
+      max: 1000,
+      step: 25,
+      sliderStops: [250, 400, 600, 800, 1000],
+    },
+  },
+
   // ========================================================================
   // General › Git
   // ========================================================================

apps/desktop/src/lib/settings/types.ts

@@ -84,6 +84,7 @@ export type ThemeMode = 'light' | 'dark' | 'system'
 export type ExtensionChangePolicy = 'yes' | 'no' | 'ask'
 export type DirectorySortMode = 'likeFiles' | 'alwaysByName'
 export type SizeDisplayMode = 'smart' | 'logical' | 'physical'
+export type BriefColumnWidthMode = 'paneWidth' | 'limited'
 export type AppColor = 'system' | 'cmdr-gold'
 export type SizeColorsPalette = 'none' | 'app' | 'rainbow'
 export type DateColorsPalette = 'off' | 'app' | 'wilting'
@@ -108,6 +109,8 @@ export interface SettingsValues {
   'listing.humanFriendlySizeUnits': boolean
   'listing.sizeMismatchWarning': boolean
   'listing.stripedRows': boolean
+  'listing.briefColumnWidthMode': BriefColumnWidthMode
+  'listing.briefColumnWidthMaxPx': number
 
   // Git
   'fileExplorer.git.showRepoChip': boolean

apps/desktop/test/e2e-playwright/CLAUDE.md

@@ -62,9 +62,9 @@ pointing to a fixture directory created by `e2e-shared/fixtures.ts`.
 
 ## Running a single spec
 
-When iterating on one spec, **run only that spec**. The full suite takes ~10 minutes and produces noisy cascade
-failures when the broken test takes the app down with it (subsequent specs fail with connection errors). Save the
-full run for the final CI-green check.
+When iterating on one spec, **run only that spec**. The full suite takes ~10 minutes and produces noisy cascade failures
+when the broken test takes the app down with it (subsequent specs fail with connection errors). Save the full run for
+the final CI-green check.
 
 With the app already running (see "Manually" above), filter by file or by name:
 
@@ -78,8 +78,8 @@ CMDR_E2E_START_PATH=/tmp/cmdr-e2e-fixtures pnpm test:e2e:playwright test/e2e-pla
 CMDR_E2E_START_PATH=/tmp/cmdr-e2e-fixtures pnpm test:e2e:playwright --grep "cursor stays in view"
 ```
 
-The checker invocation (`./scripts/check.sh --check desktop-e2e-playwright`) doesn't support filtering — it always
-runs the whole suite. So during iteration, prefer the manual flow.
+The checker invocation (`./scripts/check.sh --check desktop-e2e-playwright`) doesn't support filtering — it always runs
+the whole suite. So during iteration, prefer the manual flow.
 
 ## Running on Linux (Docker)