Tombol 44px, Font 16px: Angka Standar di Panel Chat Mobile

Baru kemarin sore, saya buka panel chat AI yang sedang saya kembangkan dari HP sambil menunggu kopi. Begitu mau mengetik, layar tiba-tiba memperbesar diri ke arah textarea tanpa saya minta. Jempol saya dua kali meleset dari tombol stop karena ukurannya terlalu kecil. Desain yang menurut saya sudah rapi di desktop ternyata berantakan begitu pindah ke layar lima inci.

Dugaan pertama saya sepele: tinggal perkecil padding, rapikan margin, selesai. Ternyata tiga keluhan itu akarnya beda-beda semua, dan jawabannya bukan soal estetika melainkan angka standar yang sudah ditulis orang lain jauh sebelum saya.

Tombol kirim dan ambang 44px

Tombol kirim dan stop semula 32px. Enak dilihat di desktop, susah ditekan dengan jari yang tidak presisi, apalagi sambil memegang HP satu tangan. Laporan WCAG 2.5.5 tentang Target Size menutup debatnya: target untuk input pointer minimal 44×44 CSS pixel, karena sentuh adalah mekanisme input berpresisi kasar yang menyembunyikan titik yang disentuh [1]. Di commit ini tombol saya besarkan ke 44px untuk layar kecil, lalu dikembalikan ke 36px mulai tablet:

className="flex size-11 shrink-0 items-center justify-center
  rounded-full bg-[#25E2A8] text-black sm:size-9"

Nilai 44 itu bukan sulap. Di Tailwind, size-11 dihitung dari skala spacing: h-<number> sama dengan calc(var(--spacing) * n) [4], jadi 11 dikali 0,25rem = 2,75rem = 44px. Angka yang sama juga jadi acuan pedoman platform; saya memilih patok WCAG supaya konsisten lintas perangkat tanpa perlu membuka halaman pedoman platform hanya untuk satu angka.

Font 16px dan zoom paksa iOS

Keluhan kedua lebih licik: setiap fokus ke textarea di iPhone, Safari memperbesar viewport dan tidak mengembalikannya. Penyebabnya di artikel CSS-Tricks: kalau font-size input 16px atau lebih, Safari fokus normal; begitu 15px atau di bawahnya, viewport ikut di-zoom [2]. Safari menganggap teks Anda terlalu kecil untuk dibaca dan "menolong" dengan memperbesar.

Perbaikannya di ChatInputBar: textarea diberi tinggi minimal 40px dengan font 16px di mobile, lalu font turun ke ukuran kecil mulai tablet. Desktop tetap kompak, mobile bebas zoom.

Transcript 65vh tanpa scroll chaining

Keluhan ketiga: men-scroll jawaban panjang sering menyusup jadi men-scroll halaman, dan gestur pull-to-refresh ikut menyala. Transcript sekarang dibungkus max-h-[65vh] di bawah xl plus overscroll-contain:

<div ref={scrollRef} className="max-h-[65vh] min-h-0 flex-1
  overflow-y-auto overscroll-contain px-4 py-4 xl:max-h-none"
  aria-live="polite">

Dokumentasi MDN menjelaskan overscroll-behavior: contain menghentikan scroll chaining ke area gulir tetangga dan mematikan gestur pull-to-refresh vertikal [3]. Jadi gulir berhenti di batas transcript, dan input bar tidak ikut meluncur keluar layar. Sisa pass ini: kotak riwayat jadi bisa dilipat di bawah konten pada layar di bawah lg dengan label "Riwayat percakapan", dan tetap kolom kiri mulai lg.

Tiga angka kecil, 44px, 16px, dan 65vh, kini jadi kontrak baru panel chat saya. Kalau mau melihat keputusan layout lain di shell yang sama, saya sudah menuliskan cara panel chat full-height di bawah navbar fixed.

Sumber

• [1] W3C WAI: Understanding SC 2.5.5 Target Size, diakses 2026-09-08
• [2] CSS-Tricks: 16px or Larger Text Prevents iOS Form Zoom, diakses 2026-09-08
• [3] MDN: overscroll-behavior, diakses 2026-09-08
• [4] Tailwind CSS Docs: height, diakses 2026-09-08