Calendar renders without layout overflow across 320 to 1440px viewports

A booking calendar that requires horizontal scrolling at 320px fails WCAG 2.2 SC 1.4.10 (Reflow) and locks out users on low-end Android devices, which represent a disproportionate share of mobile traffic in emerging markets. Fixed-width calendar grids are one of the most common causes of horizontal overflow: a 7-column week grid with fixed column widths adds up to 700px or more on desktop, which is unreadable on mobile. Missing viewport meta tags compound this by preventing the browser from scaling correctly. The result is that mobile users see a broken, unreadable booking interface and leave.

Replace fixed-width calendar grid containers with responsive Tailwind utility classes and ensure src/app/layout.tsx includes the viewport meta tag.

// src/components/Calendar.tsx
export function Calendar({ slots }) {
  return (
    <div className="w-full overflow-hidden">
      {/* 1-col on mobile, 4-col on tablet, 7-col on desktop */}
      <div className="grid grid-cols-1 sm:grid-cols-4 lg:grid-cols-7 gap-1">
        {slots.map(slot => <CalendarSlot key={slot.id} {...slot} />)}
      </div>
    </div>
  )
}

In src/app/layout.tsx, confirm the viewport meta tag is present:

export const metadata = {
  // ...
  viewport: 'width=device-width, initial-scale=1',
}

Test at 320px, 375px, 768px, 1024px, and 1440px using browser DevTools device emulation — no element should extend past the viewport edge.