Pas Restyle Sidebar, Chip Tag Malah Goyang 1 Pixel

Kemarin saya lagi ngubah tampilan sidebar blog di Next.js + Tailwind. Awalnya kartu-kartu di sidebar pakai gaya rounded-2xl border plus backdrop-blur, lumayan berat dipandang. Pas dibuang, sidebar langsung terasa lebih ringan dibaca. Section saya ganti jadi dipisah garis tipis pakai border-t dan divide-y. Daftar artikel terbaru saya kasih nomor mono 01 sampai 05 biar keliatan kayak index. Terus tinggal chip tag yang tadinya keliling border.

Pas saya mulai ngubah state chip itu, masalah muncul. Tadinya chip punya border keliling, pas hover atau active saya cuma swap jadi background lembut doang. Dicoba di browser, chip lain di baris yang sama ikut goyang sedikit. Bukan geser jauh, cuma 1px. Tapi pas barisannya lagi rapi, mata langsung nangkep ada yang nggak pas.

Satu piksel emang sepele.

Saya sempat kira ini gara-gara box-sizing nggak disetel. Dugaan awal, salah. Saya pikir kalau dimensi dihitung include border, perubahan bakal ketutup. Ternyata pas state berubah dari ada border ke nol border, ukuran box-nya tetep beda karena yang satu punya border 1px, yang satu nggak. Border itu bagian dari box model, dia numpuk di luar content dan padding. Di standard box model, padding dan border ditambahkan ke dimensi width atau height kecuali elemennya pakai box-sizing: border-box. Dan border-box pun nggak nolong kalo satu kondisinya emang nggak punya border sama sekali.

Ring inset jadi pilihan saya karena alasan paling simpel: box-shadow itu nggak pernah pegang porsi di layout.

Tiga Opsi yang Saya Timbang

Pertama, kasih border transparan permanen di semua state. Jadi 1px itu selalu ke-reserve, pas hover tinggal ganti warna bordernya aja. Trade-off-nya ada ghost box yang nggak keliatan tapi tetep kehitung di layout, dan tiap chip bawa properti yang sebenarnya nggak dipakai.

Kedua, andalkan box-sizing: border-box supaya border masuk hitungan width. Udah saya bahas di atas: ini cuma nolong kalau border-nya tetep ada di semua state. Begitu satu state dibuat polos tanpa border, total box-nya tetep menyusut.

Ketiga, buang border sama sekali, pakai ring inset yaitu box-shadow inset. Di Tailwind ini tersedia sebagai utilitas. Versi lamanya bernama ring-inset, di Tailwind v4 namanya jadi inset-ring. Shadow inset digambar di dalam padding box, di atas background dan di bawah konten, begitu kata referensi MDN. Dan spec CSS Backgrounds and Borders dari W3C tegas: shadows never affect layout, and do not trigger scrolling or increase the size of the scrollable area. Jadi pas chip ganti state, layout baris tetap diam.

Saya pribadi milih opsi ketiga, walau banyak yang lebih terbiasa reserve border transparan. Box-shadow inset itu cara paling bersih buat garis dalam tanpa ngacauin posisi elemen lain.

Praktiknya di kode, sebelum dan sesudahnya begini:

// Sebelum: swap border, box goyang 1px pas state berubah
<button className={`px-3 py-1 rounded-full ${active ? 'bg-primary/10' : 'border border-primary/40'}`}>
  {tag}
</button>

// Sesudah: ring inset, layout diam
<button className="px-3 py-1 rounded-full bg-primary/10 ring-1 ring-inset ring-primary/40">
  {tag}
</button>

Di versi sesudah, chip selalu punya ring inset tipis di semua state. Nggak ada penghapusan border yang bikin box nyusut. Chip lain di baris yang sama nggak ikut goyang lagi pas kursor lewat.

Sidebar sekarang rapi. Section dipisah garis tipis, daftar terbaru bernomor mono, chip tag pakai bg lembut plus ring inset. Satu catatan buat yang mau naik versi: di Tailwind v4 cari yang namanya inset-ring, jangan ring-inset lagi. Kalau mau baca konteks layout shift-nya lebih jauh, web.dev nulis kalau shift kejadian pas elemen visible pindah start position antar frame, dan skor CLS yang bagus itu 0.1 ke bawah. Pelajaran kecil dari restyle sore itu: garis dalam elemen lebih baik diserahin ke box-shadow ketimbang border, kalo kita benci layout yang ikut bergerak. Kalau tertarik pola serupa di sisi komponen lain, saya pernah nulis soal grid, Show More, dan trade-off SEO-nya.