frontend

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.

Panel konteks kanan workspace AI dilepas dari bingkai kartu: satu border kiri sebagai divider, mengikuti bahasa desain sidebar.

TL;DR: Panel konteks di kanan chat workspace berubah dari kartu melayang jadi panel yang nempel rata ke tepi viewport. Diff-nya cuma satu baris class, tapi perannya bergeser dari bingkai empat sisi jadi divider vertikal di sisi kiri. Pelajarannya: elemen yang nempel ke tepi layar nggak butuh bingkai, cukup satu garis pemisah ke sisa layout.

Navbar belum scroll tampak tanpa garis karena border-transparent: border 1px tetap dirender, hanya warnanya yang transparan. Fix: border-border/60.

TL;DR: Border navbar sebenarnya sudah dirender sejak awal, cuma warnanya transparan sehingga tak terlihat di state awal. Pola ini disengaja untuk mencegah layout shift, karena menghilangkan border benar-benar akan mengubah tinggi navbar tiap scroll. Fix-nya satu baris, ganti border-transparent jadi border-border/60, sisanya dikerjakan transisi 500ms yang sudah ada.

Kartu yang tidak sejajar dengan logo navbar ternyata soal gutter: semua container px-4 sm:px-6 lg:px-8 dinormalisasi ke px-3 sm:px-4.

TL;DR: Kartu di section utama homepage tampak masuk sedikit dibanding logo dan menu di navbar, padahal harus sejajar. Penyebabnya bukan lebar kartu, melainkan perbedaan padding: section pakai px-4 sm:px-6 lg:px-8, navbar cuma px-3 sm:px-4, selisihnya 16 pixel di layar besar. Solusinya semua container dinormalisasi ke px-3 sm:px-4, sehingga gutter punya satu sumber kebenaran dan garisnya tetap lurus saat resize.

Refactor navbar dan footer dari pill max-w-6xl jadi bar selebar viewport: max-width naik satu tingkat, konten tetap mx-auto max-w-6xl.

TL;DR: Navbar dan footer blog berubah dari bentuk pill jadi bar full-bleed dari tepi ke tepi viewport. Kuncinya max-w-6xl nggak dihapus tapi pindah ke container dalam dengan mx-auto, sementara elemen luar pegang latar semi transparan plus backdrop-blur. Slot border transparan yang berubah pas scroll mencegah layout shift, dan menu mobile otomatis full width tanpa hack tambahan.

Override light mode pakai shorthand background diam-diam me-reset background-clip:text dari base rule, jadi teks gradient tampil sebagai kotak warna.

TL;DR: Bug gradient text berubah jadi kotak warna muncul karena shorthand background me-reset background-clip:text dari base rule, padahal gradient-nya valid dan tidak ada error. Fix-nya cukup ganti ke longhand background-image supaya properti pemotong tetap hidup. Pelajarannya: pakai background-image untuk override tema, dan jadikan screengrab per tema langkah wajib sebelum push.

Ikon GitHub dan badge Next.js putih hardcode lenyap begitu kartu footer light mode diubah jadi putih solid. Solusinya var(--foreground).

TL;DR: Commit d6b73b2 bikin kartu footer putih solid, dan ikon SVG yang hardcode putih ikut invisible karena white-on-white. Perbaikannya simpel: semua hex di Footer.tsx diganti var(--foreground), plus varian light gradient neon pakai palet GitHub yang lebih pekat biar kontras di light mode. Pelajarannya: warna yang mengikuti tema wajib pakai variabel, karena hex literal di komponen theme-aware cuma bom waktu.

Kartu bg-card/20 sampai /90 nyaris tak terlihat di light mode karena opacity modifier Tailwind v4 mengkompilasi warna jadi color-mix dengan var token.

TL;DR: Kartu portofolio pakai bg-card dengan opacity modifier Tailwind yang dikompilasi jadi color-mix terhadap variabel --card, jadi hasilnya tergantung tema. Saat latar light mode dibuat terang, campuran putih transparan menyatu dengan latar dan kartu jadi tak terlihat, padahal dark mode aman karena kontrasnya beda. Solusinya override CSS spesifik light mode yang memaksa background solid plus bayangan tipis.

Lima artikel tersembunyi di dalam carousel harus di geser satu per satu. Untuk navigasi blog, daftar vertikal terbukti lebih jujur.

TL;DR: Carousel di halaman Blog bikin artikel sulit ditemukan, padahal pola sama berhasil di halaman layanan. Bedanya ada di jenis konten: carousel cocok untuk showcase visual terbatas, tapi daftar artikel butuh navigasi yang bisa dipindai cepat. Solusinya simpel: daftar vertikal lima artikel terbaru, dua puluh baris kode dihapus, masalah selesai.