Panel Tengah Jadi Kotak di Layar Besar Lewat Dua Utility

Layar lebar, workspace AI saya kebuka tiga kolom: sidebar di kiri, panel konteks di kanan, output di tengah. Dua kolom pinggir udah kotak polos, tanpa garis, tanpa sudut melengkung. Panel tengah? Masih tampil kayak kartu. Sudutnya melengkung 14 pixel, ada border tipis ngelilingin, latarnya semi transparan. Satu-satunya bagian di layar yang masih keliatan kayak widget tempelan.

Perbaikannya cuma satu baris di AiChatWorkspace.tsx. Message commit-nya bilang panelnya jadi "no border", dan dugaan pertama saya meleset: saya kira class kartunya dihapus total, jadi panelnya kotak di semua ukuran layar.

Ternyata nggak.

Diff-nya cuma nambah xl:rounded-none xl:border-0 di ujung deklarasi class. Kartu aslinya nggak disentuh sama sekali. Untung diff-nya cuma segitu, jadi salah dugaannya ketahuan cepet.

// sebelum
className="rounded-[14px] border border-border bg-card/40"

// sesudah
className="rounded-[14px] border border-border bg-card/40 xl:rounded-none xl:border-0"

Ini juga tweak ketiga di siklus rapikan UI saya belakangan: yang pertama soal warna border dan kapan dia muncul, yang kedua soal perannya sebagai bingkai atau divider. Yang ini soal kapan border-nya boleh dilepas.

Base class tetep ada, cuma ditimbun di xl

Kuncinya di cara kerja Tailwind yang mobile-first: utility tanpa prefix berlaku di semua ukuran layar, utility ber-prefix kayak xl: baru aktif di breakpoint itu dan ke atas [7]. Hasil kompilasinya begini: base class tetep ke-render di mana-mana, terus satu media query min-width nimpa radius sama lebar border, tapi cuma di layar besar. Di mobile, panelnya tetep kartu. Utility yang sama nggak perlu ditulis dua kali, cukup sekali sebagai default, sekali sebagai pengecualian.

Soal "no border" di message commit, presisinya sebenernya begini: border-0 itu set border-width jadi nol [5]. Keluarga utility border di Tailwind emang misahin lebar dan warna, jadi nol-in lebar nggak nyentuh warna yang udah ke-definisikan di class asli. Tanpa lebar, border ya nggak kegambar. Nggak dibuang, cuma ditipisin sampe nol.

Beda sepintar itu di tulisan, tapi beda prinsip. Komponennya masih punya identitas kartu yang utuh, tinggal ditumpuk override di satu breakpoint. Kalo dibandingin ngehapus class kartunya langsung, versi override jauh lebih gampang dibalikin: buang dua utility di ujung, beres.

Dua utility, satu perubahan identitas

Yang bikin saya makin suka pola ini: styling kartu emang boleh jadi default buat layar kecil, terus breakpoint besar yang melepasnya. Di layar sempit, panel output butuh wujud kartu biar punya ruangnya sendiri. Begitu layar cukup lebar, grid tiga kolom udah jadi bingkainya, dan border di dalemnya cuma nambah noise. Catatan commit bilang ukuran sama spacing nggak disentuh, dan wajar, karena di diff nggak ada satu pun utility spacing.

Saya pribadi makin yakin ini pola yang enak dipelihara daripada ngeluarin kartu dari class dasar terus ngembaliin bentuknya di tiap breakpoint. Kerja sekali di satu tempat, keputusannya keliatan jelas. Bukti gampangnya: buka lagi di tab sempit, kartunya langsung utuh tanpa saya nulis satu class pun khusus buat mobile.

Hasilnya, tiga kolom sekarang satu bahasa di xl: sidebar, konteks, output, semuanya kotak polos. Nggak ada lagi panel yang keliatan beda perlakuan.

Satu hal lain yang saya bawa pulang: message commit yang terlalu ringkas bisa nyesatin, termasuk diri sendiri di kemudian hari. "No border" bikin saya duga panelnya telanjang di semua ukuran. Ke depan saya coba biasain nulis lebih spesifik, misalnya "border-width jadi nol di xl, tampilan mobile tetap kartu". Detik ngetik ekstra jauh lebih murah daripada lima menit salah paham.

Sumber

1. border-width — Tailwind CSS 2. responsive design — Tailwind CSS

Sumber

• Sumber 5 [5]
• Sumber 7 [7]