paul/audi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Tobi G
2026-08-17 19:08:06 +02:00
parent 7fc378f427
commit 7319501ee6
9 changed files with 72 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
homeassistant/www/audi-dashboard.css
+13
View File
@@ -405,6 +405,19 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
.row dd { margin: 0; font-size: 14.5px; color: var(--fg); text-align: right; }
.row dd small { display: block; font-size: 11.5px; color: var(--fg3); margin-top: 3px; }
.rows-fest dd { min-width: 120px; }
/* Fussnote unter einer Zeile, ueber die volle Kachelbreite statt in der
rechten Spalte: dort blieben nur ~217px, in die eine Prognose wie
"9.029 km, voraussichtlich am 12.04.2027" zwangslaeufig umbrach.
:has() grenzt das Umbrechen auf genau die Zeilen ein, die eine Fussnote
fuehren - alle anderen .row bleiben unveraendert einzeilig. */
.row:has(.row-fussnote) { flex-wrap: wrap; }
.row-fussnote {
flex: 1 0 100%;
text-align: left;
font-size: 11.5px;
color: var(--fg3);
margin-top: 4px;
}
.leaf {
display: flex; align-items: center; justify-content: space-between;