Skip to content

fix(ui): improve desktop control sizing and spacing - #285

Open
WilliamWang1721 wants to merge 6 commits into
Kuddev:mainfrom
WilliamWang1721:fix/desktop-ui-control-spacing
Open

WilliamWang1721 wants to merge 6 commits into
Kuddev:mainfrom
WilliamWang1721:fix/desktop-ui-control-spacing

Conversation

@WilliamWang1721

Copy link
Copy Markdown
Contributor

Result / 用户结果

Improve the desktop UI ergonomics and visual spacing of Pebrel, primarily addressing controls that appear undersized and overly compact on macOS while keeping the shared implementation appropriate for Windows.

Key changes:

  • Increase regular Settings action buttons and select triggers to a comfortable minimum height.
  • Give text buttons more horizontal and vertical breathing room instead of the previous narrow, elongated appearance.
  • Improve segmented controls such as character-spacing choices so they no longer look like overly thin capsules.
  • Increase the visible and actual hit area of title-bar controls such as:
    • Settings
    • Collapse / expand sidebar
    • Command Manager
    • Right sidebar
  • Use approximately 18px toolbar icons inside 32×32 logical-pixel interaction surfaces.
  • Increase Settings help/reset interaction targets to 32px.
  • Keep approximately 8px spacing between adjacent title-bar controls.

The existing 34px font-size +/- controls and Settings navigation rows are already appropriately sized and are intentionally retained.

Terminal font size, terminal cell geometry, configuration semantics, native window controls, and terminal rendering density are unchanged.

Design / 设计边界

The root issue is not the font itself, but that several gpui-component controls derive their dimensions from the application's rem size.

Pebrel uses the UI font size as the rem base. With the default 14px UI font, a nominal medium 2rem button becomes only about 28px high. Controls therefore become increasingly compressed as the UI font gets smaller.

This change separates important desktop control geometry from the text-size baseline instead of globally enlarging the application.

The implementation remains deliberately small:

  • Reuses existing gpui-component controls.
  • Adds only small shared sizing helpers.
  • Keeps existing hover, pressed, selected, disabled, focus, tooltip and click behavior.
  • Does not introduce a new density system or design framework.
  • Does not add dependencies.
  • Does not change persistence, threading, window management or terminal behavior.
  • Does not make platform-specific forks where the same desktop geometry can be shared.

Select triggers are enlarged without forcing their popup menus or search fields to inherit the same sizing.

The geometry is based on Pebrel's existing UI constraints and common desktop ergonomics rather than treating touch-oriented target sizes as desktop requirements.

Relevant references:

The 32px interaction surface and 18px icon sizes are Pebrel design choices, not claimed as universal Apple or Windows requirements.

Evidence / 验证依据

The feature branch is based directly on upstream main:

9dc058d12765893553d5fc7a2c37c870c96168b0

Local/preparation validation completed:

  • cargo fmt --all -- --check
  • git diff --check
  • python3 scripts/check_architecture.py --base 9dc058d12765893553d5fc7a2c37c870c96168b0

A focused GPUI regression test was added for the shared controls. It verifies:

  • minimum button geometry at small UI font sizes;
  • actual 32×32 toolbar hit targets;
  • clicking inside button padding still activates the control;
  • disabled controls remain non-interactive.

The implementation does not alter the terminal rendering hot path.

Remaining platform visual acceptance should still include:

  • macOS light and dark appearance;
  • narrow windows and long/CJK labels;
  • keyboard focus visibility and navigation;
  • Retina / mixed-DPI rendering;
  • Windows visual verification.

Compilation or virtual-window tests should not be treated as substitutes for those native visual checks.

Required Review / 必须确认

  • Focused UI-only change with no unrelated feature work.
  • Existing presentation and component architecture is reused.
  • No duplicate UI behavior authority or new framework is introduced.
  • Architecture checks pass against the actual upstream base.
  • No architecture budgets or CI rules are weakened.
  • Complete native macOS visual acceptance.
  • Complete Windows visual acceptance and DPI review.

github-actions Bot added a commit to WilliamWang1721/pebrel that referenced this pull request Sep 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant