Kartunya Udah Square, Wrappernya Belum
Kartu output udah square di xl tapi panel masih keliatan kotak dalam kotak; padding dan gap wrapper induk ikut dibuang supaya edge to edge.
Ringkasan
Panel tengah udah dibikin square dengan xl:border-0 xl:rounded-none, tapi masih kelihatan kotak dalam kotak karena wrapper induknya masih bawa xl:p-4 dan gap-4. Fix-nya satu baris: tambah xl:p-0 xl:gap-0 di induk, karena border dan radius milik kartu tapi spacing di sekelilingnya milik pembungkus. Pelajarannya: elemen yang keliatan salah nggak selalu yang salah.
Panel tengah chat workspace udah saya bikin square di commit sebelumnya: xl:rounded-none dan xl:border-0 di kartu output. Border hilang, rounded hilang. Tapi pas saya lihat lagi hasilnya di breakpoint xl, panelnya belum bener-bener nempel. Ada strip putih tipis di sekeliling kartu, plus jarak sebelum sidebar kiri dan kanan.
Kotak tanpa border yang tetap keliatan kayak kotak di dalam kotak.
Dugaan pertama saya salah: kira kartunya belum square dan ada class yang kelewat. Saya buka AiChatWorkspace.tsx lagi dan baca className kartunya satu-satu. Semuanya lengkap. Kartunya emang udah square.
Yang masih nempel ternyata di pembungkusnya. Wrapper kolom tengah masih bawa xl:p-4 dari sebelumnya, dan flex column-nya masih punya default gap-4. Jadi kartunya square, tapi dia masih duduk di dalam wrapper yang punya padding sendiri, dan masih ada gap di sambungan sama dua sidebar. Full bleed-nya gagal bukan karena kartu, tapi karena ruang di induknya nggak ikut dibuang.
Fix-nya satu baris, di induk:
- <div className="order-1 flex min-w-0 flex-1 flex-col gap-4 ... xl:p-4">
+ <div className="order-1 flex min-w-0 flex-1 flex-col gap-4 ... xl:gap-0 xl:p-0">Kenapa begini masuk akal: p-4 itu utility buat ngatur padding keempat sisi elemen [1]. gap itu buat ngatur jarak antar children di layout flex [2], dan MDN nyebut property ini ngatur gaps atau gutters antara rows dan kolom di container flex, grid, dan multi-column [3]. Dua-duanya kerjanya di wrapper. Padding nentuin ruang di dalam pembungkus, gap nentuin jarak antar anak-anaknya. Border dan radius itu milik kartu, spacing di sekelilingnya milik induk. Membuang border di anak cuma nuntasin setengah masalah.
Dari sini saya dapet satu kebiasaan baru: utility square di anak itu janji yang harus dilunasi induknya. Kalau nemu xl:border-0 xl:rounded-none di satu komponen, saya langsung cari induknya dan pasang xl:p-0 xl:gap-0 di breakpoint yang sama, berpasangan. Bisa aja sih dibikin class khusus kayak full-bleed biar maknanya eksplisit, tapi buat satu pemakaian di satu file, saya milih dua utility di className aja. Semuanya keliatan di satu tempat, nggak perlu lompat cari definisinya.
Setelah commit 966844c masuk, panel tengah akhirnya bener-bener edge to edge antara dua sidebar dan tingginya nyambung sama shell. Satu baris. Yang saya inget dari kasus ini bukan nama utility-nya, tapi lokasinya: elemen yang keliatan salah nggak selalu yang salah. Kadang yang perlu diubah itu pembungkusnya.