Skip to content

fix: browser header and hint bar not reactive to terminal width #168

@oobagi

Description

@oobagi

Problem

The editor's header and status bar both adapt to terminal width — they read m.width, calculate dynamic gaps, apply .Width() lipgloss constraints, and even collapse less-important info at narrow widths. The browser does none of this for either its breadcrumb header or its hint bar. Both render static hardcoded strings that ignore m.width, causing overflow on narrow terminals and wasted space on wide ones.

Current behavior: Browser header and hints are fixed-width, don't respond to resize.
Expected behavior: Consistent with the editor — adapt to terminal width like the editor's header and status bar do.

Context

Editor header (internal/editor/render.go:22–61) — the gold standard:

  • Reads m.width (line 23)
  • Calculates gap between left/right (line 44)
  • Smart truncation: drops file path at narrow widths, keeps size (lines 45–56)
  • Applies .Width(width) (line 60)

Editor status bar (internal/editor/editor.go:1235–1276):

  • Same pattern: reads m.width, dynamic gap, .Width(width) constraint

Browser breadcrumb/header (internal/browser/browser.go:1334–1350):

  • No reference to m.width
  • fmt.Sprintf with static layout, no gap or width constraint
  • Breadcrumb text like " Notebooks Recent" is hardcoded positioning

Browser hint bar (internal/browser/browser.go:1636–1676):

  • No reference to m.width
  • 5 hint variations all render as static dim.Render(...) strings (lines 1648, 1652, 1664, 1668, 1672, 1675)
  • No gap calculation, no .Width() constraint

Both the browser's WindowSizeMsg handler (line 234) stores m.width correctly — it's just never used in rendering.

Proposed approach

Apply the editor's pattern to both browser rendering functions:

Breadcrumb header (renderBreadcrumb)

  1. Read m.width
  2. Calculate gap between breadcrumb tabs and any right-side info
  3. Apply .Width(m.width) to output

Hint bar (renderStatusBar)

  1. Read m.width
  2. Apply .Width(m.width) to all hint string outputs
  3. Optionally: collapse lower-priority hints at narrow widths (e.g., drop ? help first, then q quit)

The editor header's truncation pattern (lines 45–56) is a good reference for graceful degradation at narrow widths.

Tasks

  • Add m.width awareness to browser.renderBreadcrumb() (line 1334)
  • Apply .Width(m.width) and dynamic gap to breadcrumb output
  • Add m.width awareness to browser.renderStatusBar() (line 1636)
  • Apply .Width(m.width) constraint to all hint string outputs
  • Optionally: collapse hints at narrow widths
  • Verify all browser states render correctly at various widths (notebook list, note list, recents, filter, input mode)

Test plan

  • Resize terminal narrow (< 60 cols) — browser header and hints don't overflow
  • Resize terminal wide (> 120 cols) — header and hints use available space
  • All browser states show correct hints: notebook list, note list, recents, filter, input mode
  • Breadcrumb tabs render cleanly at all widths
  • Editor header and status bar behavior unchanged

Scope

Type: bug
Size: small

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingphase-14Command Palette & Polish

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions