iOS/Grossbildschirm-Auflage im HA-Panel scharf schalten

audi-dashboard-app.js laedt jetzt zusaetzlich audi-dashboard-ios.css in
den Shadow-Root (zweiter <link>, rein additiv neben audi-dashboard.css).
Im Docker-Testcontainer bei 375px (Tab-Leiste unten) und 1280px (Grid mit
264px-Seitennavigation) verifiziert.

Zwei Fixes an audi-dashboard-ios.css waren dafuer noetig:
- :host-Selektoren werden von diesem Browser innerhalb von @container
  verworfen (kein Fehler, die Regel fehlt einfach im CSSOM) - die alte
  412px-Zentrierung aus audi-dashboard.css wird deshalb unbedingt statt
  nur ab 860px aufgehoben.
- audi-dashboard-version.json hochgezaehlt, sonst liefert der Browser die
  alte Datei aus dem HTTP-Cache trotz neuem Serverstand.

design/README.md dokumentiert beide Fixes fuer kuenftige Aenderungen an
dieser Datei.
This commit is contained in:
2026-08-11 15:12:51 +02:00
parent 838ea7f362
commit b10ce7c0a5
4 changed files with 40 additions and 6 deletions
+7 -2
View File
@@ -42,8 +42,13 @@
body{padding:0;background:var(--canvas)}
html,body{height:100%}
/* Der von _aufbauen() eingefuegte Wrapper zwischen Host und .phone */
:host > div{height:100%}
/* Der von _aufbauen() eingefuegte Wrapper zwischen Host und .phone. Die
412px-Deckelung aus audi-dashboard.css (fuer die alte Einzelgroesse
gedacht) wird hier unbedingt aufgehoben, nicht nur ab 860px: auf
schmalen Bildschirmen macht der Viewport selbst die Breite eng genug,
:host-Selektoren innerhalb @container werden von diesem Browser aber
offenbar verworfen - deshalb unbedingt statt bedingt. */
:host > div{height:100%;max-width:none}
.phone{width:100%;max-width:none;height:100%;border-radius:0;
font-family:"Audi Type",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;letter-spacing:0}