layout

Satu daftar kartu, dua baris: baris kedua keluar container pakai w-screen dan margin calc, tanpa memicu scrollbar horizontal.

TL;DR: Pasang w-screen buat full bleed tuh sering muncul scrollbar horizontal, soalnya 100vw dihitung sebelum scrollbar, jadi kelebihan beberapa piksel. Solusinya pakai ml-[calc(50%-50vw)] plus overflow-hidden di section pembungkusnya, bukan di body biar sticky header nggak mati; overflow: clip lebih aman lagi. Markup kartu cukup sekali lewat renderCard IIFE, slicing doang per barisnya.

Root layout yang pindah ke segmen [locale] membuat html lang benar dari server, menghapus bootstrap bahasa di klien, dan meloloskan audit struktur 24 halaman.

TL;DR: Gue awalnya kira skrip deteksi bahasa di klien yang salah, ternyata konsepnya emang nggak bener: html lang harus diset dari server. Solusinya simpel, cukup pindah root layout ke folder app/[lang] terus hapus skripnya. Hasilnya? 24 halaman lolos audit dan screen reader baca konten dengan pelafalan yang bener sejak awal.

Kartu output udah square di xl tapi panel masih keliatan kotak dalam kotak; padding dan gap wrapper induk ikut dibuang supaya edge to edge.

TL;DR: 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 chat tiga kolom terpotong navbar fixed karena elemen fixed tidak mengambil ruang alur dokumen. Perbaikannya di pasangan xl:mt-14 dan pengurang 100dvh.

TL;DR: Navbar fixed tidak mengambil ruang di alur dokumen, jadi panel setinggi 100dvh tetap tersembunyi di baliknya. Solusinya dua deklarasi yang berpasangan: xl:mt-14 menggeser titik awal panel ke bawah navbar, sedangkan h-[calc(100dvh-3.5rem)] memangkas tingginya. Untuk tampilan, padding dan gap dihilangkan di xl, cukup satu border pemisah, sementara di bawah xl kartu lama tetap dipakai.

Kartu yang tidak sejajar dengan logo navbar ternyata soal gutter: semua container px-4 sm:px-6 lg:px-8 dinormalisasi ke px-3 sm:px-4.

TL;DR: Kartu di section utama homepage tampak masuk sedikit dibanding logo dan menu di navbar, padahal harus sejajar. Penyebabnya bukan lebar kartu, melainkan perbedaan padding: section pakai px-4 sm:px-6 lg:px-8, navbar cuma px-3 sm:px-4, selisihnya 16 pixel di layar besar. Solusinya semua container dinormalisasi ke px-3 sm:px-4, sehingga gutter punya satu sumber kebenaran dan garisnya tetap lurus saat resize.

Refactor navbar dan footer dari pill max-w-6xl jadi bar selebar viewport: max-width naik satu tingkat, konten tetap mx-auto max-w-6xl.

TL;DR: Navbar dan footer blog berubah dari bentuk pill jadi bar full-bleed dari tepi ke tepi viewport. Kuncinya max-w-6xl nggak dihapus tapi pindah ke container dalam dengan mx-auto, sementara elemen luar pegang latar semi transparan plus backdrop-blur. Slot border transparan yang berubah pas scroll mencegah layout shift, dan menu mobile otomatis full width tanpa hack tambahan.