frontend

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.

Chat mobile butuh struktur sendiri ala aplikasi pesan, tetapi logika jawaban tetap satu sumber lewat TurnBody yang diekspor ulang.

TL;DR: Layar sempit butuh struktur beda, bukan versi dipampatkan, jadi ChatMobileThread dibuat khusus di bawah breakpoint lg dengan pola aplikasi pesan: header sticky, gelembung dua sisi, dan composer di bawah. Desktop tiga kolom tak tersentuh. Logika jawaban tetap satu sumber karena TurnBody dipakai ulang lewat named export; 271 barisnya murni tata letak.

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.

Badge rujukan di daftar sumber dihitung lewat indexOf dari array asli, bukan posisi iterasi list hasil filter, supaya nomornya tetap nyambung.

TL;DR: Nomor badge di sidebar dihitung dari array hasil filter, bukan turn.sources asli, sehingga begitu satu knowledge entry tersaring semua nomor bergeser dan rujukan melenceng ke kartu salah. Fixnya satu baris: hitung nomor via indexOf di array asli, filter tetap cuma urusan tampilan. Pelajarannya, angka rujukan harus lahir dari data asli, posisi render cuma milik tampilan.

Kartu sumber kini dirender inline di bawah jawaban chat; komponen dipakai ulang lewat named export dengan id unik per panel dan state expand terpisah.

TL;DR: Commit kecil memindahkan render kartu sumber ke bawah jawaban di panel tengah, bukan cuma di sidebar. Yang kelihatan sepele ternyata nyeret dua kontrak lama: SourceCard harus jadi named export karena filenya kini punya dua komponen, dan id kartu perlu sufiks biar tetap unik di satu dokumen. Expanded state juga dibuat milik panel tengah sendiri, direset otomatis tiap pindah turn.

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.