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 <footer> keeps the off-screen translation
contained inside the footer.
b7931731f9