fix(ui): polish select contrast, mobile safe-area bottom, and error copy#85
fix(ui): polish select contrast, mobile safe-area bottom, and error copy#85adityakulraj wants to merge 8 commits intocomnam90:developfrom
Conversation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Release v1.1.2
Co-authored-by: comnam90 <2719284+comnam90@users.noreply.github.com> Agent-Logs-Url: https://github.com/comnam90/veeam-data-cloud-services-map/sessions/7a523d0f-02c8-40b3-a146-8825104c6240
Co-authored-by: comnam90 <2719284+comnam90@users.noreply.github.com> Agent-Logs-Url: https://github.com/comnam90/veeam-data-cloud-services-map/sessions/6c8772a1-a520-4ff1-80f7-85e1ccfb6cf5
CHANGELOG.md — New file documenting project history from v1.0.0 through v1.2.0 GITFLOW_RELEASE_GUIDE.md — Added warning to verify PR base branch is `main` in Step 3; updated current release status to v1.2.0 data/regions/azure/azure_poland_central.yaml + functions/regions.json — Azure Poland Central (Warsaw) region with VDC for Microsoft 365 and Entra ID support package.json / package-lock.json — Version bumped to 1.2.0; updated hono (4.11.7 → 4.12.7), wrangler (4.59.1 → 4.76.0), and transitive Cloudflare dependencies
|
@comnam90 would appreciate your review when you have time. Thank you! |
There was a problem hiding this comment.
Pull request overview
UI polish updates to the Hugo single-file SPA (layouts/index.html) to improve native control readability, mobile safe-area layout, and error messaging.
Changes:
- Added bottom safe-area padding to the map container to avoid iOS home-indicator clipping.
- Added explicit dark/light colors for native
<select>controls to improve dark-mode readability. - Updated map load error copy to “The map failed to load.”
| /* Select dropdown styling */ | ||
| select { | ||
| background-color: #1e293b; | ||
| color: #ffffff; | ||
| transition: all 0.2s ease; | ||
| cursor: pointer; | ||
| } | ||
| .light select { | ||
| background-color: #ffffff; | ||
| color: #0f172a; | ||
| } |
There was a problem hiding this comment.
The new select { background-color; color } rules are likely overridden by the existing Tailwind utility classes on #providerFilter (bg-slate-800/80, text-white, etc.), since class selectors have higher specificity than the element selector. As a result, this change may not affect the select’s rendered colors. Consider either removing the conflicting bg-*/text-* classes from the <select> and relying on these CSS rules, or increasing CSS specificity (or using !important as a last resort) so the explicit colors reliably apply.
| .map-container { | ||
| flex: 1; | ||
| min-height: 0; | ||
| padding-bottom: env(safe-area-inset-bottom); | ||
| } |
There was a problem hiding this comment.
padding-bottom: env(safe-area-inset-bottom) is applied to .map-container, but the same element also has p-0 sm:p-4 lg:p-6 classes in the markup, which set padding-bottom as well. Depending on the generated CSS order (and at sm/lg breakpoints), the safe-area padding can be overridden, and iOS landscape (>=640px) could still be clipped. Consider moving the safe-area padding to a wrapper element that doesn’t also apply p-* utilities, or make the bottom padding explicitly combine safe-area + existing padding (e.g., via max()/calc() or per-breakpoint rules).
Summary
selectcontrols to improve Windows dark mode readabilitypadding-bottom: env(safe-area-inset-bottom)to.map-containerso content isn’t clipped by iOS home indicatorTesting
git diff --checknpm run testnode_modules/esbuildand priornpminternal error)Closes #82