css

Warna entri AI di navbar saya bergeser begitu urutan menu berubah. Pelajaran soal penugasan warna pakai modulo index dan fix berbasis identitas data.

TL;DR: Warna entri "Tanya AI" di navbar bergeser ternyata karena aksen dihitung pakai modulo index array, bukan bug tema. Perbaikannya mempin warna ke identitas href, plus menambah pill state idle supaya entri khusus beda bentuk sekaligus warna sesuai WCAG. Pelajarannya: identitas visual sebaiknya terikat data, bukan urutan render.

Menyusutkan tinggi field dan tombol komposer chat desktop dengan empat kelas responsif Tailwind, tanpa komponen terpisah dan tanpa JavaScript.

TL;DR: Okay, the user wants a 3-sentence summary in informal-professional Indonesian, exactly 3 sentences, max 60 words total. No markdown, bullets, or repeating the title. Just the summary.

Wrapper mobile fullscreen di bawah header fixed 66px pakai mt-66px plus calc 100dvh-66px, transcript tanpa cap 45vh, dan header ringkas ala aplikasi pesan.

Sidebar riwayat chat hilang di breakpoint lg: tie-break order CSS dan elemen details yang dipaksa jadi wadah flex, dua akar masalah satu commit.

TL;DR: Sidebar chat menghilang di breakpoint lg karena dua bug dari refactor accordion mobile. Pertama, nilai order yang sama membuat wrapper tengah menang tie-break urutan sumber sehingga sidebar terdorong keluar viewport; solusinya cukup tambah lg:order-2. Kedua, elemen details tidak cocok jadi wadah flex di Chromium, jadi accordion diganti state React biasa dengan tombol aria-expanded dan div.

Pass responsif panel chat AI: tombol kirim 44px sesuai WCAG, font input 16px anti zoom iOS, dan transcript 65vh dengan overscroll-contain.

TL;DR: Panel chat yang rapi di desktop ternyata berantakan di mobile: tombol susah ditekan, textarea memicu zoom iOS, dan scroll bocor ke halaman. Perbaikannya bertumpu pada tiga angka standar: tombol 44px sesuai WCAG 2.5.5, font input 16px agar Safari tak memperbesar viewport, dan transcript dibatasi 65vh dengan overscroll-contain. Hasilnya, sentuhan lebih presisi dan gulir berhenti di tempatnya.

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.

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.