fix(ui): dark mode select, safe area bottom, error copy#83
fix(ui): dark mode select, safe area bottom, error copy#83jjaguero wants to merge 1 commit intocomnam90:developfrom
Conversation
There was a problem hiding this comment.
Pull request overview
UI polish updates to the Hugo single-page map UI to improve cross-platform appearance (notably Windows form controls), mobile safe-area handling, and user-facing error copy.
Changes:
- Added bottom safe-area padding to the main app container for devices with a home indicator.
- Added explicit dark/light styling defaults for native
<select>elements. - Updated the map-load error message to active voice.
| select { | ||
| background-color: #1e293b; /* dark */ | ||
| color: white; | ||
| transition: border-color 0.2s ease; | ||
| cursor: pointer; | ||
| } | ||
| .light select { | ||
| background-color: white; | ||
| color: #0f172a; | ||
| } |
There was a problem hiding this comment.
The new global select { background-color: ...; color: ... } rule is likely overridden on the only <select> in this file (#providerFilter) because it already has Tailwind utility classes (bg-slate-800/80, text-white, light:bg-white, light:text-slate-900) that have higher specificity than an element selector. If this change is intended to fix the provider filter appearance on Windows, consider either removing the conflicting utility classes from that <select> and relying on the global rules, or make the CSS target #providerFilter (or the .dark/.light variants) with enough specificity to win.
|
|
||
| /* Select dropdown styling */ | ||
| select { | ||
| background-color: #1e293b; /* dark */ |
There was a problem hiding this comment.
The inline /* dark */ comment next to the hex color doesn’t add much context (it restates what the code already conveys). Consider removing it or replacing it with a brief “why” if there’s a non-obvious reason for using this specific value.
| background-color: #1e293b; /* dark */ | |
| background-color: #1e293b; |
Description
Added explicit dark mode styles for native (Windows) Added bottom safe area padding for mobile devices Updated error message to active voice Type of Change [ ] Adding a new region [ ] Adding a service to an existing region [ ] Correcting existing data [ X] Other (UI polish / accessibility fixes) Regions/Services Affected Provider Region Service(s) N/A N/A N/A Source / Evidence Checklist [ ] I have verified this information from an official Veeam source [ ] Region YAML files follow the correct structure: [ ] provider is exactly "AWS" or "Azure" (case-sensitive) [ ] coords is an array [lat, lon], not a string [ ] Tiered services (vdc_vault) use array of {edition, tier} objects [ ] Boolean services (vdc_m365, vdc_entra_id, vdc_salesforce, vdc_azure_backup) are set to true [X] I have tested locally with hugo server (if possible) [ ] File naming follows convention: {provider}_{region_code}.yaml Related Issues