Blog

Kartu output panel AI tetap tampil di mobile lalu dilepas di xl lewat xl:rounded-none dan xl:border-0; pola mobile-first override satu breakpoint.

TL;DR: Panel output akhirnya jadi kotak polos di layar lebar setelah tambah dua utility Tailwind, xl:rounded-none dan xl:border-0, tanpa menyentuh class kartu aslinya. Sifat mobile-first Tailwind bikin base class tetap aktif di semua ukuran, override cuma jalan di breakpoint xl. Pesan commit "no border" ternyata menyesatkan, sebaiknya tulis lebih spesifik biar nggak salah paham lagi.

Panel konteks kanan workspace AI dilepas dari bingkai kartu: satu border kiri sebagai divider, mengikuti bahasa desain sidebar.

TL;DR: Panel konteks di kanan chat workspace berubah dari kartu melayang jadi panel yang nempel rata ke tepi viewport. Diff-nya cuma satu baris class, tapi perannya bergeser dari bingkai empat sisi jadi divider vertikal di sisi kiri. Pelajarannya: elemen yang nempel ke tepi layar nggak butuh bingkai, cukup satu garis pemisah ke sisa layout.

Navbar belum scroll tampak tanpa garis karena border-transparent: border 1px tetap dirender, hanya warnanya yang transparan. Fix: border-border/60.

TL;DR: Border navbar sebenarnya sudah dirender sejak awal, cuma warnanya transparan sehingga tak terlihat di state awal. Pola ini disengaja untuk mencegah layout shift, karena menghilangkan border benar-benar akan mengubah tinggi navbar tiap scroll. Fix-nya satu baris, ganti border-transparent jadi border-border/60, sisanya dikerjakan transisi 500ms yang sudah ada.

Mencerahkan token background menggeser seluruh halaman. Navbar butuh rasa putih khas chrome, jadi warna literal plus dark variant.

TL;DR: Navbar transparan terlihat kotor di light mode karena memakai token --background yang dibagi dengan seluruh halaman. Solusinya: warna literal bg-white untuk light mode, sedangkan dark mode tetap pakai token lewat variant dark:. Trade-off-nya navbar tak lagi ikut tema bila token diubah, tapi jalur migrasi ke token khusus tinggal satu baris.

Chip pemilih mode di dasar sidebar tidak kelihatan sebelum menggulung. Dipindah ke puncak, atribut type dan aria-pressed tetap terpasang.

TL;DR: Saklar mode pencarian dan mode tentang-saya tadinya tersembunyi di dasar sidebar, jadi pengguna baru menyadarinya setelah menggulung riwayat obrolan. Commit ini memindahkannya ke puncak sidebar dengan logika sederhana: kontrol yang menentukan mode harus terlihat sebelum keputusan diambil. Form input kini menyusut jadi tanggung jawabnya saja, sementara atribut aksesibilitas seperti type dan aria-pressed tetap dipertahankan.

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.

Menyembunyikan footer di halaman chat tanpa mengorbankan rendering server, lewat pola komposisi resmi Next.js App Router.

TL;DR: Halaman chat /ai butuh tampilan bersih tanpa footer, tapi menyembunyikannya lewat CSS cuma menutupi masalah, dan menurunkan seluruh layout ke client terlalu boros. Solusinya pola komposisi Next.js: komponen client kecil bernama ConditionalFooter memeriksa usePathname lalu return null di rute /ai. Footer tetap Server Component penuh karena diselundupkan sebagai children, bukan dirombak jadi client.

Riwayat chat lama memicu error duplicate key di React. Akar masalahnya ID ganda plus penomoran lewat effect yang rapuh.

TL;DR: Error key ganda di React muncul pas riwayat chat di-load ulang dari localStorage yang ternyata punya ID turn kembar. Akar masalahnya dua lapis: data lama tidak unik dan penomoran ID lewat effect terpisah yang timing-nya rapuh. Solusinya, setiap turn di-reindex jadi 0 sampai n-1 saat restore, lalu nextIdRef di-seed di effect yang sama.

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.