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:
2026-08-16 20:52:46 +02:00
co-authored by Claude Opus 5
parent 17b25d492a
commit ec55e5808e
5 changed files with 83 additions and 19 deletions
+39 -9
View File
@@ -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`