fix: mobile

Author: sergiocarracedo

.tmp-check-overflow.mjs

@@ -0,0 +1,40 @@
+import { chromium } from '@playwright/test'
+
+const browser = await chromium.launch({ headless: true })
+const page = await browser.newPage({ viewport: { width: 280, height: 844 } })
+await page.goto('http://localhost:4322/', { waitUntil: 'networkidle' })
+
+const selectors = [
+  'main[data-page-content]',
+  'div.reveal.relative.overflow-hidden.bg-primary\\/70',
+  'section.relative.mb-24.px-2.pt-20',
+  '.vt-content-shell.grid.grid-cols-12.items-end.gap-8',
+  'div.col-span-12.lg\\:col-span-7.pr-0.sm\\:pr-4',
+  'div.relative.overflow-hidden.rounded-xl.px-4.py-8',
+  'div.relative.z-10',
+  'h1',
+  'h1 + p',
+]
+
+const data = await page.evaluate((sel) => {
+  return sel.map((s) => {
+    const el = document.querySelector(s)
+    if (el === null) {
+      return { s, missing: true }
+    }
+
+    const r = el.getBoundingClientRect()
+    return {
+      s,
+      left: r.left,
+      right: r.right,
+      width: r.width,
+      scrollWidth: el.scrollWidth,
+      clientWidth: el.clientWidth,
+      className: typeof el.className === 'string' ? el.className : '',
+    }
+  })
+}, selectors)
+
+console.log(JSON.stringify(data, null, 2))
+await browser.close()

src/components/home/HeroSection.astro

@@ -43,19 +43,21 @@ const titleHtml = renderTitleMarkdown(t.titleMarkdown)
   style="--reveal-delay: 20ms;"
 >
   <HeroShader />
-  <section class="relative mb-24 px-4 pt-26 sm:px-8 sm:pt-28 xl:px-12">
-    <div class="vt-content-shell grid grid-cols-12 items-end gap-8 lg:gap-12">
-      <div class="col-span-12 lg:col-span-7 pr-6 sm:pr-4">
+  <section class="relative mb-24 px-2 pt-20 sm:px-8 sm:pt-28 xl:px-12">
+    <div
+      class="vt-content-shell grid grid-cols-1 items-end gap-8 lg:grid-cols-12 lg:gap-12"
+    >
+      <div class="min-w-0 w-full overflow-hidden pr-0 sm:pr-4 lg:col-span-7">
         <div
           class="relative overflow-hidden rounded-xl px-4 py-8 sm:px-8 sm:py-12"
         >
           <div class="relative z-10">
             <h1
-              class="font-headline text-4xl tracking-tight text-white drop-shadow-[0_6px_24px_rgba(0,0,0,0.65)] sm:text-6xl lg:text-8xl lg:leading-[0.9]"
+              class="max-w-full text-balance wrap-break-word font-headline text-4xl leading-[1.02] tracking-tight text-white drop-shadow-[0_6px_24px_rgba(0,0,0,0.65)] sm:text-6xl sm:leading-[0.95] lg:text-8xl lg:leading-[0.9]"
               set:html={titleHtml}
             />
             <p
-              class="mt-6 max-w-2xl text-base leading-relaxed text-white sm:text-xl"
+              class="mt-6 max-w-2xl wrap-break-word text-base leading-relaxed text-white sm:text-xl"
             >
               {t.description}
             </p>

src/components/home/UpcomingEventsPanel.astro

@@ -21,17 +21,17 @@ const activeUpcomingEvents = upcomingEvents.filter(
 {
   activeUpcomingEvents.length > 0 && (
     <aside
-      class="col-span-12 h-full lg:col-span-5 lg:block lg:pt-8"
+      class="h-full min-w-0 max-w-full lg:block lg:col-span-5 lg:pt-8"
       data-upcoming-events-panel
       data-buffer-ms="7200000"
     >
-      <div class="flex h-[32rem] flex-col overflow-hidden rounded-xl bg-white/25 p-5 text-ink backdrop-blur-xl">
+      <div class="flex h-[32rem] min-w-0 w-full max-w-full flex-col overflow-hidden rounded-xl bg-white/25 p-5 text-ink backdrop-blur-xl">
         <div class="mb-4 flex items-center justify-between">
           <p class="text-xs font-semibold tracking-[0.14em] text-ink-contrast uppercase">
             {t.upcomingEvents} ({activeUpcomingEvents.length})
           </p>
         </div>
-        <div class="flex flex-1 flex-col gap-3 overflow-y-auto pr-1">
+        <div class="flex min-w-0 flex-1 flex-col gap-3 overflow-y-auto pr-1">
           {activeUpcomingEvents.map((event) => (
             <div data-event-card data-event-date={event.data.date}>
               <UpcomingEventCard event={event} />

src/components/home/upcoming-event-card/UpcomingEventCard.astro

@@ -13,7 +13,7 @@ const { event } = Astro.props
 const t = homeHeroT[LANG]
 
 const cardClass =
-  'block rounded-lg bg-white/40 p-3 text-ink-contrast transition-transform hover:-translate-y-0.5'
+  'block rounded-lg bg-white/40 p-3 text-ink-contrast transition-transform hover:-translate-y-0.5 max-w-full'
 ---
 
 {

src/components/home/upcoming-event-card/UpcomingEventCardContent.astro

@@ -27,7 +27,7 @@ const formatTime = (dateValue: number): string =>
     .replace(/\./g, '')
 ---
 
-<div class="flex items-start justify-between gap-3">
+<div class="flex items-start justify-between gap-3 max-w-full">
   <div>
     <div class="mb-3 flex items-start gap-3">
       <GroupLogo