Repository navigation
fix(ui): spacing polish and one look for every form field - #445
Merged
Merged
Conversation
- 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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three commits, best reviewed one at a time.
1. Spacing and card titles (
4ae4224).card-title. The statistics charts and the trip sidebar gain an icon, and three look-alike title classes are gone..view-subtitle, which sits close under the page title.2. Native vehicle type select, one size for every field (
ce8d793)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.--field-*tokens set the padding, font size, line height, corner radius and focus ring for native selects, text fields and the multiselect.form-select-smis removed. That smaller variant was why the selects in Settings and the map's Period filter had less padding.form-selectinstead ofform-control.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 passvue-tsc --build, stylelint, oxlint, eslint and Prettier are clean🤖 Generated with Claude Code