From ec55e5808e607246d7bb02a04133376dea2bf0e9 Mon Sep 17 00:00:00 2001
From: Tobi G <tobias.gsa@t-online.de>
Date: Sun, 16 Aug 2026 20:52:46 +0200
Subject: [PATCH] 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 <noreply@anthropic.com>
---
 AGENTS.md                                     | 48 +++++++++++++++----
 .../www/audi-dashboard-ios.css                |  8 +++-
 .../installationspaket/www/audi-dashboard.css | 19 ++++++--
 homeassistant/www/audi-dashboard-ios.css      |  8 +++-
 homeassistant/www/audi-dashboard.css          | 19 ++++++--
 5 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index eed8d09..5af68f3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -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`
diff --git a/homeassistant/installationspaket/www/audi-dashboard-ios.css b/homeassistant/installationspaket/www/audi-dashboard-ios.css
index 22cf15c..83ecf0f 100644
--- a/homeassistant/installationspaket/www/audi-dashboard-ios.css
+++ b/homeassistant/installationspaket/www/audi-dashboard-ios.css
@@ -214,8 +214,12 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
 :host([data-theme="tag"]) .tabbar{background:rgba(242,242,247,.78)}
 .tab{border-top:0;margin-top:0;padding:7px 2px 6px;gap:3px;
   font-size:10px;letter-spacing:0;text-transform:none;color:var(--ios-grau)}
-/* Beschriftung folgt weiter dem Schalter in den Einstellungen */
-.tabbar.ohne .tab span{display:none}
+/* Beschriftung folgt weiter dem Schalter in den Einstellungen.
+   :not(.tabpille) ist Pflicht: die Icon-Huelle ist ebenfalls ein <span> (span
+   class="tabpille"), ein blosses ".tab span" traf also nicht nur das Label
+   sondern auch die Pille selbst - das Icon verschwand mit, nicht nur der
+   Text. Genau das war der gemeldete "ganze Menueleiste verschwindet"-Bug. */
+.tabbar.ohne .tab span:not(.tabpille){display:none}
 .tab svg{width:26px;height:26px;stroke-width:1.5}
 /* myAudi-Menueleiste: das aktive Symbol sitzt hell in einer gefuellten Pille,
    die uebrigen bleiben grau - kein farbiger Tint, kein Oberkantenstrich. */
diff --git a/homeassistant/installationspaket/www/audi-dashboard.css b/homeassistant/installationspaket/www/audi-dashboard.css
index 2a9c3d4..5a91c0b 100644
--- a/homeassistant/installationspaket/www/audi-dashboard.css
+++ b/homeassistant/installationspaket/www/audi-dashboard.css
@@ -268,7 +268,11 @@ main#view::-webkit-scrollbar { width: 0; height: 0; }
 .tab svg.voll { fill: currentColor; stroke: none; }
 .tab:active svg { transform: scale(.9); }
 .tab span { font-size: 11px; letter-spacing: .01em; }
-.tabbar.ohne .tab span { display: none; }
+/* :not(.tabpille) - die Icon-Huelle ist selbst ein <span>, ein blosses
+   ".tab span" hier hiess frueher auch der Pille (samt Icon) display:none.
+   Ueberschrieben von derselben Regel in audi-dashboard-ios.css (dieselbe
+   Spezifitaet, spaeter geladen), aber auch hier falsch und daher fixiert. */
+.tabbar.ohne .tab span:not(.tabpille) { display: none; }
 .tabbar.ohne .tab { padding: 14px 0 12px; }
 .tabbar.ohne .tab svg { width: 26px; height: 26px; }
 
@@ -449,8 +453,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
 /* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect-
    ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter
    notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle
-   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. */
-.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; }
+   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats.
+   margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des
+   vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */
+.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; }
 
 .bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
 .bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -527,6 +533,13 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   appearance: none;
 }
 .feld input:focus, .feld select:focus, .notiz:focus { outline: none; border-color: var(--red); }
+/* Das AUFGEKLAPPTE <select>-Popup ist Browser-/OS-Chrome, kein Teil des
+   Seiten-DOMs - color-scheme (siehe :host weiter oben) beeinflusst es nur
+   teilweise, der Rest bleibt hell. Einzige zuverlaessige Stellschraube:
+   Chrome (u.a.) rendert die Zeilen im Popup tatsaechlich mit dem hier
+   gesetzten background-color/color statt Systemfarben - deckende Werte,
+   var(--tile-2) im Nacht-Theme ist transparent und wuerde durchscheinen. */
+.feld select option { background-color: var(--canvas); color: var(--fg); }
 /* Pull-down-Button-Optik (Apple HIG): einzelner Abwaerts-Chevron statt des
    durch appearance:none oben entfernten nativen Browser-Pfeils. */
 .feld select {
diff --git a/homeassistant/www/audi-dashboard-ios.css b/homeassistant/www/audi-dashboard-ios.css
index 22cf15c..83ecf0f 100644
--- a/homeassistant/www/audi-dashboard-ios.css
+++ b/homeassistant/www/audi-dashboard-ios.css
@@ -214,8 +214,12 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
 :host([data-theme="tag"]) .tabbar{background:rgba(242,242,247,.78)}
 .tab{border-top:0;margin-top:0;padding:7px 2px 6px;gap:3px;
   font-size:10px;letter-spacing:0;text-transform:none;color:var(--ios-grau)}
-/* Beschriftung folgt weiter dem Schalter in den Einstellungen */
-.tabbar.ohne .tab span{display:none}
+/* Beschriftung folgt weiter dem Schalter in den Einstellungen.
+   :not(.tabpille) ist Pflicht: die Icon-Huelle ist ebenfalls ein <span> (span
+   class="tabpille"), ein blosses ".tab span" traf also nicht nur das Label
+   sondern auch die Pille selbst - das Icon verschwand mit, nicht nur der
+   Text. Genau das war der gemeldete "ganze Menueleiste verschwindet"-Bug. */
+.tabbar.ohne .tab span:not(.tabpille){display:none}
 .tab svg{width:26px;height:26px;stroke-width:1.5}
 /* myAudi-Menueleiste: das aktive Symbol sitzt hell in einer gefuellten Pille,
    die uebrigen bleiben grau - kein farbiger Tint, kein Oberkantenstrich. */
diff --git a/homeassistant/www/audi-dashboard.css b/homeassistant/www/audi-dashboard.css
index 2a9c3d4..5a91c0b 100644
--- a/homeassistant/www/audi-dashboard.css
+++ b/homeassistant/www/audi-dashboard.css
@@ -268,7 +268,11 @@ main#view::-webkit-scrollbar { width: 0; height: 0; }
 .tab svg.voll { fill: currentColor; stroke: none; }
 .tab:active svg { transform: scale(.9); }
 .tab span { font-size: 11px; letter-spacing: .01em; }
-.tabbar.ohne .tab span { display: none; }
+/* :not(.tabpille) - die Icon-Huelle ist selbst ein <span>, ein blosses
+   ".tab span" hier hiess frueher auch der Pille (samt Icon) display:none.
+   Ueberschrieben von derselben Regel in audi-dashboard-ios.css (dieselbe
+   Spezifitaet, spaeter geladen), aber auch hier falsch und daher fixiert. */
+.tabbar.ohne .tab span:not(.tabpille) { display: none; }
 .tabbar.ohne .tab { padding: 14px 0 12px; }
 .tabbar.ohne .tab svg { width: 26px; height: 26px; }
 
@@ -449,8 +453,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
 /* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect-
    ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter
    notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle
-   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. */
-.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; }
+   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats.
+   margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des
+   vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */
+.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; }
 
 .bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
 .bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -527,6 +533,13 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   appearance: none;
 }
 .feld input:focus, .feld select:focus, .notiz:focus { outline: none; border-color: var(--red); }
+/* Das AUFGEKLAPPTE <select>-Popup ist Browser-/OS-Chrome, kein Teil des
+   Seiten-DOMs - color-scheme (siehe :host weiter oben) beeinflusst es nur
+   teilweise, der Rest bleibt hell. Einzige zuverlaessige Stellschraube:
+   Chrome (u.a.) rendert die Zeilen im Popup tatsaechlich mit dem hier
+   gesetzten background-color/color statt Systemfarben - deckende Werte,
+   var(--tile-2) im Nacht-Theme ist transparent und wuerde durchscheinen. */
+.feld select option { background-color: var(--canvas); color: var(--fg); }
 /* Pull-down-Button-Optik (Apple HIG): einzelner Abwaerts-Chevron statt des
    durch appearance:none oben entfernten nativen Browser-Pfeils. */
 .feld select {