From b7931731f9793b86e2a9a696a722abbb7246cabd Mon Sep 17 00:00:00 2001 From: hermes Date: Tue, 9 Jun 2026 14:18:54 +0700 Subject: [PATCH] fix(responsive): mobile footer restructure + categories 1-col + overflow fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three mobile issues fixed: 1. Categories section: <640px (mobile) now 1 column. Previously it was already 2 columns at the smallest breakpoint which made the tiles feel cramped. Uses Tailwind's default sm: (640px) for the 1->2 transition, not a custom min-[500px]. 2. Footer mobile layout (<1024px): three centered rows inside the same max-w-7xl container. - Row 1: Company Info (1 col, max-w-md, centered) - Row 2: Quick Links + สินค้ายอดนิยม (2 cols, max-w-2xl, centered) - Row 3: ติดต่อเรา (1 col, max-w-sm outer, max-w-xs button column) The narrow inner max-widths are deliberate: a full-width row of contact buttons looks stretched, especially the bottom one with the โทรเลย / แอดไลน์ buttons. 3. Horizontal overflow bug: data-animate='fade-left' and 'fade-right' children sit at translateX(30px) / translateX(-30px) in their initial state, before the IntersectionObserver fires. On small viewports this pushes the page 30px wider than the viewport and reveals a horizontal scrollbar as soon as the user loads the page. Adding overflow-x-clip on