fix(css): lantai dukungan 360px dapat angka jujur dan gerbang pemeriksa

[ahliweb]

Ringkasan

Audit menemukan dua cacat nyata di sekitar komitmen "mobile-first dari 360px" yang didokumentasikan repo ini, plus fakta bahwa komitmen itu tidak punya satu pun pemeriksa otomatis. Ketiganya diperbaiki sebagai satu keping atomik — dan review menemukan bahwa cacat inti punya dua instans, bukan satu, karena draf pertama gerbangnya sendiri hanya membaca src/styles/global.css.

Cacat 1 — risiko overflow tanpa sisa di lantai dukungan (DUA tempat)

.container (src/styles/global.css) memasang padding: 0 1.25rem — 20px tiap sisi, 40px total. Pada lantai dukungan 360px yang didokumentasikan, ruang bersihnya karena itu PERSIS 320px. DUA tempat menulis track grid tepat di angka itu, di dalam <main class="container"> (BaseLayout.astro):

/* src/styles/global.css — .grid-cards */
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

/* src/components/views/Home.astro — .sorotan, di dalam <style> */
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

Sebuah track selebar 320px di ruang 320px pas TANPA sisa sama sekali. box-sizing: border-box menyelamatkannya hari ini, tapi pembulatan sub-piksel atau border/outline/shadow yang kelak ditambahkan ke .card/.sorotan akan mendorong gulir mendatar persis di lebar yang dijanjikan repo ini untuk didukung — dan tidak ada satu gerbang pun yang akan memerah karenanya.

Perbaikan: minmax(min(320px, 100%), 1fr) dan minmax(min(20rem, 100%), 1fr) (unit rem dipertahankan di Home.astro karena itulah yang dipakai berkas itu) — identik hasilnya di setiap lebar ≥320px, hanya tidak lagi bisa dipaksa overflow oleh track-nya sendiri. Diverifikasi tidak ada minmax(<N>px|rem, …) atau min-width tetap lain di src/styles/global.css ATAU di blok <style> mana pun di bawah src/ yang duduk di margin sama atau lebih buruk (SitemapView.astro 280px, Home.astro 11rem/15rem — semua nyaman di bawah 320px, tidak disentuh).

Cacat 2 — aritmetika dokumentasi tidak cocok dengan CSS

AGENTS.md dan docs/awcms-astro/ui-ux-design-system.md (plus cermin .id.md) menulis "kartu 328px — viewport 360px — kanvas 800px tampil pada skala 0.41". 328px mengasumsikan padding 1rem; padding .container yang sungguh berlaku adalah 1.25rem, jadi lebar kartu sungguhan adalah 320px dan skalanya 0.40 (320/800). Kesimpulannya tidak berubah (22px × 0,40 = 8,8px, tetap di bawah 9px dan praktis tidak terbaca) — hanya kedua angka yang salah. Diperbaiki di keempat berkas.

Cacat 3 — aturan tanpa pemeriksa (dan pemeriksanya sendiri hampir punya lubang yang sama)

tests/lebar-360.test.mjs (baru) membaca lantai 360px dan padding sisi .container dari CSS-nya sendiri (bukan menulis ulang "320" sebagai angka tetap), lalu menolak — di src/styles/global.css DAN di setiap blok <style> dari setiap .astro di bawah src/ (komponen, layout, halaman), bukan hanya global.css:

• minmax(<N>px|rem, …) yang mencapai atau melebihi lebar bersih tanpa dibungkus min(…, 100%);
• width/min-width tetap yang lebih lebar dari itu, kecuali menu/dropdown/target sentuh, media query khusus layar lebar, aturan position: absolute/fixed yang dikeluarkan dari alur normal, atau punya overflow-x pada dirinya sendiri;
• angka kartu/skala di AGENTS.md yang tidak lagi sinkron dengan aritmetika CSS yang sebenarnya.

Draf pertama gerbang ini hanya membaca global.css dan tetap HIJAU di atas .sorotan — persis bentuk kegagalan paling dihindari repo ini: gerbang yang mengubah "tidak diperiksa" menjadi "diperiksa dan aman" padahal cacatnya masih ada di berkas lain. Cakupannya diperbaiki sebelum PR ini dianggap selesai. Dasar rem→px (1rem = 16px) dikonfirmasi lewat grep atas seluruh html/:root di repo ini, bukan diasumsikan.

Gerbang ini STATIK atas teks CSS — dinyatakan terus terang di docblock-nya: ia tidak bisa membuktikan keamanan render sungguhan (pembulatan sub-piksel, metrik font nyata, scrollbar sungguhan, clipping ancestor sungguhan), yang butuh pemeriksaan headless-browser document.documentElement.scrollWidth <= 360 atas halaman yang sudah dibangun, terhadap awcms backend yang hidup.

Terbukti gigit EMPAT kali (dua regresi × dua cakupan): minmax(320px, 1fr) disuntik ke .grid-cards di global.css, lalu ke <style> FaqAccordion.astro; min-width: 400px disuntik ke .card di global.css, lalu ke <style> Breadcrumb.astro. Semuanya membuat gerbang merah dengan pesan yang menyebut berkas dan baris yang tepat, lalu dipulihkan.

AGENTS.md/.id.md §Antarmuka, item Definition of Done tentang 360px, dan .claude/skills/awcms-astro-gerbang/SKILL.md/.id.md kini menyebut gerbang baru ini DAN cakupan berkasnya yang sebenarnya (bukan lagi "global.css saja"); hitungan bun test di keenam dokumen yang dijaga tests/documented-counts.test.mjs naik dari 39 ke 40.

Verifikasi

• bun test — 782 pass / 12 skip / 0 fail (40 berkas, naik dari 39)
• bun test tests/lebar-360.test.mjs — 5 pass / 0 fail
• bun run check — 0 errors, 0 warnings baru (5 hints pra-eksisting, tidak terkait)
• bun run audit:dokumen — tidak ada pelanggaran
• bun run audit:translation — OK, 64 mirror current
• bun run audit:graf — tidak ada pelanggaran
• bun run audit:rilis — tidak ada pelanggaran (1 changeset menunggu, 0 hari)
• bun run check:lockfile — sinkron

Test plan

• bun test hijau (782 pass, 0 fail)
• tests/lebar-360.test.mjs terbukti merah pada EMPAT suntikan regresi (bare minmax(320px,1fr) dan min-width:400px, masing-masing di global.css dan di sebuah blok <style> komponen), lalu hijau lagi setelah dipulihkan
• Semua gerbang yang diminta dijalankan dan hijau

🤖 Generated with Claude Code