Service-Seite: Prognose-Fussnote ueber volle Breite statt umgebrochen

Gemeldet: das Datum der Oelwechsel-Prognose steht in einer eigenen Zeile.
Nachgemessen: das <small> in der rechten Spalte war 29px hoch bei 217px
Breite (zwei Zeilen); .row ist ein Flex aus dt/dd, und dd bekommt nur den
Rest neben dem Titel - fuer "9.029 km, voraussichtlich am 14.04.2027"
reicht das bei 12,5px nicht.

Statt an Schriftgroesse oder Text zu drehen, haengt die Fussnote jetzt als
eigenes Element (.row-fussnote) neben dt/dd und bricht per flex:1 0 100%
auf eine eigene Zeile ueber die volle Kachelbreite um. flex-wrap:wrap ist
per :has(.row-fussnote) auf genau diese Zeilen eingegrenzt, damit die
uebrigen .row-Verwendungen zweispaltig bleiben.

Die verschachtelte fm-/nicht-fm-Verzweigung im Markup faellt dabei zu
einem hatMeldung-Zweig fuer den Wert plus einem separaten fussnote-String
zusammen; die Anzeigelogik selbst ist unveraendert.

Live geprueft bei 375px und 1280px: beide Fussnoten einzeilig (14px),
307px bzw. 636px breit; alle 17 .row auf "Mein Audi" weiterhin
zweispaltig; keine neuen Konsolenfehler.

Co-Authored-By: Claude Opus 5 <[email protected]>

This commit is contained in:

tobias

2026-08-17 19:08:06 +02:00

co-authored by

Claude Opus 5

parent 7fc378f427

commit 7319501ee6

9 changed files with 72 additions and 18 deletions

									
										homeassistant/www/audi-dashboard-ios.css
									
		+1
		
												View File
												
				@@ -123,6 +123,7 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo

				.row dt{font-size:16px;color:var(--fg)}

				.row dd{font-size:16px;color:var(--fg2)}

				.row dd small{font-size:12.5px;margin-top:2px}

				.row-fussnote{font-size:12.5px}

				.rows-fest dt{flex:0 0 150px}

				.chev{stroke:var(--ios-grau);stroke-width:1.6}