Panel Konteks Berhenti Jadi Kartu: Border Jadi Divider

Buka workspace chat AI, dan mata langsung ke kanan. Panel konteks di situ keliatan kayak kartu ngambang: sudutnya melengkung, ada bingkai di empat sisi, plus jarak dari tepi viewport. Sementara sidebar di kiri udah full height, nempel rata ke pinggir layar. Dua elemen dalam satu layar, dua bahasa desain. Yang kiri bilang "aku bagian dari rumah", yang kanan bilang "aku kartu yang numpang di atasnya".

Perubahannya cuma satu baris class di AiChatWorkspace.tsx. Tapi baris itu mengubah peran border, bukan sekadar menghapusnya. Dan ini yang bikin saya sempat salah baca task sendiri.

Dugaan pertama: hapus aja bingkainya

Pas dapet task ini, dugaan saya sederhana: kartunya dilepas bingkainya, beres. Ganti border jadi border-0, tutup laptop. Kenyataannya bordernya nggak dihapus sama sekali. Dia pindah kerjaan.

Sebelumnya, section panel kanan di breakpoint xl punya class xl:my-4 xl:mr-4 rounded-[14px] border border-border bg-card/40. Sesudahnya jadi begini:

// sebelum
xl:my-4 xl:mr-4 rounded-[14px] border border-border bg-card/40

// sesudah
rounded-none border-0 border-l border-border bg-card/40

Ada dua keputusan desain yang ikut lewat di satu baris itu, dan dua-duanya luput dari tebakan pertama saya.

rounded-none bukan berarti "hapus class rounded-nya terus yaudah". Class itu ngeset radius jadi nol secara eksplisit, kayak yang didokumentasiin Tailwind [4]. Detailnya kecil, tapi penting karena nilai lama pakai arbitrary value rounded-[14px]. Radius lama harus ditimpa, bukan cuma ditinggal pergi.

Lalu border-0 border-l: semua sisi dinolkan dulu, baru sisi kiri dapet lebar 1 piksel [5]. Panelnya tetep punya border. Tinggal satu sisi.

Bingkai dan pemisah itu beda kerjaan

Baru setelah liat hasilnya di layar saya nemu istilah yang pas. Diff ini bukan "ngilangin bingkai kartu", tapi ganti peran border: dari bingkai jadi divider.

Bingkai kerjanya nandain "ini objek terpisah dari permukaan di belakangnya". Makanya kartu klasik punya border empat sisi plus sudut melengkung. Pemisah kerjanya lain: nandain batas antara dua area yang bersebelahan. Material Design 3 nyebut elemen ini divider, garis tipis yang mengelompokkan konten dalam list atau container, lengkap sama pedoman varian full width dan inset [6]. Divider inset dikasih jarak dari tepi, divider full width nggak. Panel yang nempel ke viewport jelas masuk kubu kedua.

Panel konteks kanan sekarang flush ke tepi layar, dipisah dari area chat cuma sama satu garis vertikal tipis. Itu pola panel, bukan kartu. Dan panel emang nggak butuh bingkai empat sisi. Bingkai di elemen yang nempel ke tepi layar malah jadi aneh: sisi yang nempel "putus" tanpa alasan jelas, sisanya jadi setengah bingkai nyari arti.

Satu garis yang lebih jujur

Saya nggak nemu catatan di commit soal alasan estetikanya yang persis, jadi bagian ini keputusan desain yang saya terima dan belakangi, bukan rekaman sejarah. Tapi logikanya gampang diikuti. Kartu ngambang itu buat elemen yang beneran melayang di atas konten: dialog, popover, card di dashboard. Chat workspace bukan keluarga itu. Layoutnya shell: sidebar kiri, area chat tengah, panel konteks kanan. Elemen shell paling jujur dibaca sebagai bidang yang dipisah garis.

Opini saya sekarang tegas: kalo elemen nempel ke tepi viewport, jangan kasih bingkai empat sisi. Satu garis di sisi yang megangin dia ke sisa layout udah cukup, sisanya riak yang nggak perlu.

Panelnya sendiri tetep scrollable kayak sebelumnya, itu udah ada dari kemaren dan nggak disentuh diff ini. Yang saya bawa pulang cuma satu: kalo ganti kartu jadi panel, pertanyaannya bukan "hapus border gimana", tapi "border ini kerjaannya jadi apa sekarang".

Sumber

1. border-radius — Tailwind CSS 2. border-width — Tailwind CSS 3. Divider guidelines — Material Design 3

Sumber

• Sumber 4 [4]
• Sumber 5 [5]
• Sumber 6 [6]