Panel Chat Saya Kepotong Navbar Fixed

Panel obrolan tiga kolom di layar lebar saya terpotong. Kolom kanan yang berisi konteks sumber berhenti persis di bawah navbar, dan bagian atas kolom tengah tersembunyi di balik navbar yang masih transparan sebelum halaman digulir. Di inspector, tinggi panelnya terbaca penuh mengikuti viewport, tetapi posisinya mulai dari paling atas layar. Akar masalahnya bukan tinggi, melainkan posisi: navbar dibuat fixed sehingga tidak mengambil ruang di alur dokumen [1]. Perbaikannya akhirnya cuma dua deklarasi Tailwind di breakpoint xl, tetapi keduanya lahir dari satu pemahaman yang sebelumnya saya lewatkan.

Dugaan Saya: h-dvh Sudah Cukup

Saya mulai dari asumsi yang masuk akal. Unit dvh adalah viewport dinamis: tingginya mengikuti antarmuka browser yang muncul dan menghilang, berbeda dari vh yang mengacu ke viewport terbesar [2]. Tailwind menyediakan h-dvh yang dikompilasi menjadi height: 100dvh [3]. Untuk layout aplikasi yang harus memenuhi layar, ini terdengar seperti jawaban final.

Faktanya, h-dvh hanya menjawab pertanyaan "seberapa tinggi", bukan "mulai dari mana". Di commit sebelumnya saya sudah memasang kelas Arbitrary xl:h-[calc(100dvh-3.5rem)], dengan harapan panel berhenti 3,5 rem di atas dasar viewport, tepat di bawah navbar. Yang terjadi: bagian atas panel tetap berada di belakang navbar saat belum digulir. Saya hampir menambah besar angka pengurangannya, padahal angkanya sudah benar. Yang salah adalah anggapannya.

Navbar Fixed Tidak Menggeser Alur Dokumen

Sesuai dokumentasi MDN, elemen dengan position fixed dikeluarkan dari alur normal dan posisinya dihitung relatif terhadap viewport, sehingga bisa dibuat mengapung di posisi yang sama terlepas dari penggulungan [1]. Konsekuensinya: navbar setinggi h-14 tidak "memakan" 3,5 rem dari halaman. Konten di bawahnya tetap dirender mulai dari titik nol viewport. Panel saya yang setinggi 100dvh dikurangi 3,5 rem, ditempatkan dari atas viewport, pasti kekurangan ruang 3,5 rem di sisi atas. Di sinilah xl:mt-14 masuk: margin menggeser titik awal panel ke bawah batas navbar, dan nilai pengurang ketinggian tetap 3,5 rem. Keduanya harus berpasangan.

// sebelum: panel pas di bawah viewport, atasnya ketutup navbar fixed
<div className="... xl:h-[calc(100dvh-3.5rem)] xl:overflow-hidden">

// sesudah: digeser ke bawah navbar, tingginya tetap dikurangi 3,5 rem
<div className="... xl:mt-14 xl:h-[calc(100dvh-3.5rem)] xl:overflow-hidden">

Kenapa 3,5 rem? Karena h-14 di Tailwind dikompilasi dari skala spacing, hasilnya 3,5 rem [3], dan navbar saya memang memakai h-14. Bila navbar berganti tinggi, dua angka di atas harus dihitung ulang bersama. Kelebihan memakai dvh sebagai dasar: saat antarmuka browser mobile berubah, tinggi panel ikut menyesuaikan tanpa JavaScript [2].

Flush dari Tepi ke Tepi, Pemisah Cukup Satu Border

Perbaikan kedua menyangkut rupa, bukan geometri. Layout lama membungkus ketiga kolom sebagai kartu-kartu terpisah dengan gap dan padding di segala arah, sehingga layar lebar terasa seperti dashboard penuh jendela mengapung. Pada overhaul ini container dibuka: padding dan gap dihilangkan di xl, sidebar obrolan kehilangan sudut membulat dan border kiri-kanannya, lalu dipasang xl:border-r sebagai satu-satunya pemisah. Panel konteks di kanan justru diberi napas xl:my-4 xl:mr-4 agar tetap punya margin dari tepi. Di bawah xl semuanya kembali ke wujud kartu lama, jadi perangkat kecil tidak ikut berubah.

Hasil akhirnya: satu permukaan kerja yang menyatu dari tepi kiri ke kanan, terbagi tiga oleh dua garis vertikal, dan berhenti tepat di bawah navbar. Pola ini bisa direuse untuk panel aplikasi apa pun yang hidup di bawah header fixed: ukur tinggi header, kurangi dari 100dvh, geser konten sebesar tinggi header, biarkan border yang memisah. Saya memakai pola serupa saat menyejajarkan gutter container dengan tepi navbar dan saat menata header footer selebar layar di Tailwind.

Sumber

• MDN Web Docs, CSS position (fixed) [1]
• MDN Web Docs, CSS length (viewport units) [2]
• Dokumentasi Tailwind CSS, height utilities [3]