Skip to content

fix(ui): spacing polish and one look for every form field - #445

Merged
joszz merged 3 commits into
mainfrom
fix/ui-spacing-polish
Oct 10, 2026
Merged

joszz merged 3 commits into
mainfrom
fix/ui-spacing-polish

Conversation

@joszz

@joszz joszz commented Oct 10, 2026

Copy link
Copy Markdown
Owner

Summary

Three commits, best reviewed one at a time.

1. Spacing and card titles (4ae4224)

  • Every card heading uses .card-title. The statistics charts and the trip sidebar gain an icon, and three look-alike title classes are gone.
  • Statistics chart cards use the standard 1.25rem card padding and 1.5rem section spacing. The trip log totals are spaced like the status grid.
  • Page subtitles share .view-subtitle, which sits close under the page title.
  • The maintenance detail modal uses the shared modal sections.
  • Phones use one 0.75rem gutter for content, topbar and footer. The breakpoint under 400px that shrank it is removed.
  • Form controls inherit the page font through one global rule. Small buttons get side padding. Control corners are 6px everywhere.

2. Native vehicle type select, one size for every field (ce8d793)

  • Vehicle type in Settings now uses a native select (SettingsSelect), like the region and units choices. The detected type gets its own settings row. The multiselect is now only used for the map's fuel type and brand filters.
  • Shared --field-* tokens set the padding, font size, line height, corner radius and focus ring for native selects, text fields and the multiselect.
  • Native selects use the multiselect's caret (one colour per theme) and its focus ring. form-select-sm is removed. That smaller variant was why the selects in Settings and the map's Period filter had less padding.
  • Time-of-day selects in the climate schedule form use form-select instead of form-control.
  • Multiselect height: the library's inner wrapper counted the border twice, which made every multiselect 2px taller than other fields. A small override fixes it.

3. Charging power filter header (1bcea38)

The label and description ran together on one line ("Power (kW)Filter stations by..."), and the slider's tooltips covered both. They now stack like the fuel filters, with room above the slider for the tooltips.

Test plan

  • vitest run: 80 files, 850 tests pass
  • vue-tsc --build, stylelint, oxlint, eslint and Prettier are clean
  • Checked in the demo app (Playwright) at 1440px and 390px, in dark and light themes. Settings, map filters, climate schedule form and trip log filters all measure 33.25px per field, and nothing overflows.

🤖 Generated with Claude Code

joszz and others added 3 commits October 10, 2026 22:06
- Every card heading uses .card-title (statistics charts and the trip
  sidebar gain an icon), replacing three look-alike title classes.
- Statistics chart cards take the 1.25rem card padding and 1.5rem
  section spacing; the trip log totals follow the status grid.
- Page subtitles share .view-subtitle, tucked under the title.
- The maintenance detail modal uses the shared modal sections.
- Phones keep one 0.75rem gutter for content, topbar and footer; the
  extra-small breakpoint that shrank it is gone.
- Form controls inherit the page font from one global rule; small
  buttons get side padding; radii settle on 6px for controls.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The vehicle type override was the only settings choice on the
multiselect; it now uses SettingsSelect like the region and units, and
the detected type becomes a settings row of its own. The multiselect
stays for the map's fuel type and brand filters.

Native selects, text fields and the multiselect now share --field-*
tokens (padding, font size, line height, radius, focus ring). Native
selects draw the multiselect's caret and ring, form-select-sm is gone,
and the time-of-day selects use form-select instead of form-control.
The multiselect's inner wrapper counted the border twice and came out
2px taller; every field now measures the same 33.25px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The header lacked settings-toggle__info, so the description ran on
from the label on one line, and the slider's always-on tooltips sat
over both. The header now stacks them like the fuel filters do and
leaves room above the slider for its tooltips.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@joszz
joszz merged commit 603b006 into main Oct 10, 2026
24 checks passed
@joszz
joszz deleted the fix/ui-spacing-polish branch October 10, 2026 20:08
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