Fix real tab-bar-icons-vanish bug, dropdown popup color, wheel/Montiert swap
The reported "whole tab bar disappears when hiding labels" bug was real,
just one level deeper than first checked. .tabbar.ohne .tab span{display:
none} targeted the label span, but the icon is also wrapped in a <span
class="tabpille"> - a bare "span" type selector doesn't care about class,
so the icon's own wrapper collapsed too. Confirmed by measuring the <svg>
directly (0x0 bounding rect) after a live screenshot showed all 5 tab
buttons empty. Fixed with :not(.tabpille) in both stylesheets.
The Modell dropdown was still bright despite the color-scheme hint from
the last commit: a <select>'s opened option list is rendered by the
browser/OS as its own surface, entirely outside the page's paint tree -
confirmed when a screenshot call hung 30s trying to capture it open.
color-scheme only gets partial credit there; explicit background-color/
color on <option> is what Chrome/Firefox/Edge actually honor for the
popup rows. Added that, verified via getComputedStyle since the open
popup itself can't be screenshotted by this tooling.
Swapped the wheel photo (now right-aligned via margin-left:auto on the
now-correctly-square .bildbox.radbild) and Montiert (already left) per
request.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
@@ -977,18 +977,48 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed
|
||||
(6) **Back arrow changed from red (`--ios-tint`) to the neutral headline color (`--fg`)** in
|
||||
`audi-dashboard-ios.css`, matching every other navigation-color decision made this project (red
|
||||
stays reserved for destructive actions per Apple's HIG).
|
||||
Investigated but could not reproduce: user reported that hiding tab labels ("Beschriftung in der
|
||||
Menüleiste" off) makes the *entire* tab bar disappear. Traced the full CSS cascade and the exact
|
||||
commit that added the sixth round's icon+label highlight (`git show` on the relevant lines) —
|
||||
the new rules are correctly scoped to `:not(.ohne)` and provably never touched the icon-only
|
||||
path; live DOM/computed-style testing (toggle the switch, click the actual label, navigate away
|
||||
and back, both mobile and desktop container widths) showed the tab bar staying visible, correctly
|
||||
sized, and correctly classed in every case tried in the in-app Chromium browser. Left unchanged
|
||||
pending a repro (screenshot or the exact device/browser) from the user, since no defect could be
|
||||
located to fix.
|
||||
Initially investigated but could not reproduce (see below for the real fix, found later the same
|
||||
day): user reported that hiding tab labels ("Beschriftung in der Menüleiste" off) makes the
|
||||
*entire* tab bar disappear. First pass traced the CSS cascade and the commit that added the sixth
|
||||
round's icon+label highlight and found it correctly scoped to `:not(.ohne)`; live DOM/computed-
|
||||
style testing (toggle, click the label, navigate away/back, both container widths) checked
|
||||
`#tabbar`'s and each `.tab`'s own box — all stayed visible, sized, and classed correctly — so the
|
||||
bug looked unreproducible and was provisionally left alone.
|
||||
Deployed to `audi_ha_test`; wheel-photo squareness, Montiert position, back-arrow color, and the
|
||||
image-cycle dots all confirmed live via direct DOM/computed-style checks (no visual screenshot
|
||||
tool available this session — see running note below).
|
||||
Follow-up same day: user reported the `color-scheme` fix alone wasn't enough — dropdowns were
|
||||
"still very bright." Correct: a `<select>`'s *opened* option list is rendered by the browser/OS
|
||||
as a separate surface outside the page's render tree entirely — confirmed firsthand when a
|
||||
screenshot tool call actually hung for 30s trying to capture it, and even a real click-to-open
|
||||
attempt afterward produced no visible change in any screenshot. `color-scheme` only gets partial
|
||||
credit there; the reliable lever is that Chrome/Firefox/Edge *do* honor explicit
|
||||
`background-color`/`color` set directly on `<option>` elements for the popup rows. Added
|
||||
`.feld select option{background-color:var(--canvas);color:var(--fg)}` — deliberately `--canvas`,
|
||||
not `--tile-2` (translucent in the night theme, would let the browser's own light backdrop show
|
||||
through). Verified via `getComputedStyle` on the actual `<option>` nodes
|
||||
(`background-color: rgb(12,16,20)`, `color: rgb(255,255,255)` in night theme) since the popup
|
||||
itself is provably outside what any screenshot in this tool can capture — user should confirm
|
||||
visually on their own device.
|
||||
Also: "Montiert" and the wheel photo were requested swapped — photo now sits on the tile's right
|
||||
edge (`.bildbox.radbild{margin-left:auto}` inside its full-width wrapper), Montiert stays
|
||||
`left`-anchored, unchanged from the seventh round.
|
||||
**Found the real tab-bar bug right after, from the user's own screenshot** ("in this view i dont
|
||||
see any menu items" — a live repro of icon-only mode, this time actually screenshotted since the
|
||||
browser pane had recovered). The earlier live-testing pass checked `#tabbar` and `.tab`'s own
|
||||
boxes and both looked fine — the actual defect was one level deeper and only visible by measuring
|
||||
the icon itself: `.tabbar.ohne .tab span{display:none}` (in both stylesheets) was meant to hide
|
||||
only the trailing label `<span>${t.label}</span>`, but the icon is *also* wrapped in a `<span
|
||||
class="tabpille">` — a bare type selector `span` does not care about class, so the rule hid the
|
||||
icon's wrapper too. `getBoundingClientRect()` on the `<svg>` read `{w:0,h:0}` and
|
||||
`getComputedStyle(.tabpille).display` read `"none"` once actually checked — that was the missing
|
||||
measurement in the first pass. This is exactly the reported "whole menu bar disappears": in icon-
|
||||
only mode every tab lost both its label *and* its icon, leaving five empty buttons in an otherwise
|
||||
correctly-visible bar. Fixed with `.tabbar.ohne .tab span:not(.tabpille){display:none}` in both
|
||||
`audi-dashboard.css` and `audi-dashboard-ios.css` (the base file's copy was already shadowed by
|
||||
the ios one at matching specificity, but fixed too rather than left as a landmine). Verified live
|
||||
via screenshot: all 5 tab icons render correctly in icon-only mode, active tab still shows its
|
||||
filled pill.
|
||||
- [ ] Fix remaining documentation drift (statistics claim, README gaps, obsolete TODO comment) —
|
||||
text-only changes; INSTALL.md's WLAN/TommiG1 drift and stale variable names were fixed
|
||||
2026-08-12 (see section B); `DESIGN_REVIEW_2026-08-13.md` and `REVIEW_main_2026-08-13.md`
|
||||
|
||||
Reference in New Issue
Block a user