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 <noreply@anthropic.com>

homeassistant/installationspaket/www/audi-dashboard-app.js

@@ -1663,21 +1663,25 @@ function vService() {
         // dem Datum. Hauptuntersuchung bleibt bewusst ohne.
         const eigenOel = t.art === "Ölwechsel" ? oelwechselPrognose() : null;
         const eigenInsp = t.art === "Inspektion" ? inspektionPrognose() : null;
+        const hatMeldung = fm.km != null || fmDatum;
+        // Die Prognose steht als eigene Zeile ueber die volle Kachelbreite
+        // unter dt/dd (.row-fussnote), nicht mehr in der rechten Spalte: dort
+        // standen nur ~217px zur Verfuegung, in die "9.029 km, voraussichtlich
+        // am 12.04.2027" zwangslaeufig zweizeilig umbrach.
+        const fussnote = hatMeldung && eigenOel
+          ? `${de(eigenOel.restKm)} km, voraussichtlich am ${dedat(eigenOel.datum)}`
+          : eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : "";
         return `<div class="row" ${letzte}>
           <dt>${t.art}
             ${t.vereinbart ? `<br><span style="color:var(--red);font-size:11px">Werkstatt am ${dedat(new Date(t.vereinbart))}</span>` : ""}
           </dt>
           <dd>
             ${iv.hersteller ? `<span class="label" style="margin-bottom:6px">Herstellervorgabe</span>` : ""}
-            ${fm.km != null || fmDatum ? `
-              <span class="werte">${fm.km != null ? de(fm.km) + " km" : ""}${fm.km != null && fmDatum ? " / " : ""}${fmDatum || ""}</span>
-              ${eigenOel ? `<small style="text-align:left">${de(eigenOel.restKm)} km, voraussichtlich am ${dedat(eigenOel.datum)}</small>` : ""}
-              ${eigenInsp ? `<small style="text-align:left">voraussichtlich am ${dedat(eigenInsp.datum)}</small>` : ""}
-            ` : `
-              <span class="werte">${eigenOel ? de(eigenOel.restKm) + " km · " + dedat(eigenOel.datum) : (anzeige.km !== null ? de(anzeige.km) + " km · " : "") + dedat(anzeige.datum)}</span>
-              ${eigenInsp ? `<small style="text-align:left">voraussichtlich am ${dedat(eigenInsp.datum)}</small>` : ""}
-            `}
+            <span class="werte">${hatMeldung
+              ? `${fm.km != null ? de(fm.km) + " km" : ""}${fm.km != null && fmDatum ? " / " : ""}${fmDatum || ""}`
+              : (eigenOel ? de(eigenOel.restKm) + " km · " + dedat(eigenOel.datum) : (anzeige.km !== null ? de(anzeige.km) + " km · " : "") + dedat(anzeige.datum))}</span>
           </dd>
+          ${fussnote ? `<small class="row-fussnote">${fussnote}</small>` : ""}
         </div>`; }).join("")}
     </dl>
   </div>

homeassistant/installationspaket/www/audi-dashboard-ios.css

@@ -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}
 

homeassistant/installationspaket/www/audi-dashboard-version.json

@@ -1 +1 @@
-{"version": 1787100000}
+{"version": 1787003000}

homeassistant/installationspaket/www/audi-dashboard.css

@@ -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;