From e5bbc51e0138dde527368d062b61ec9df7eb2273 Mon Sep 17 00:00:00 2001
From: itziarZG <itziar.zameza.dev@gmail.com>
Date: Mon, 13 Jul 2026 10:04:30 +0200
Subject: [PATCH] fix(programa): responsive issues in view-mode toggle and grid
 view

Two small responsive fixes for /programa:

1. Remove redundant view-mode label. The <span> displaying
   'Schedule view mode' was redundant with the radio button labels
   ('List' / 'Visual grid') and forced the fieldset to wrap to two
   rows in mobile (375px), making the toggle 86px tall. The accessible
   <legend> remains for screen readers.

2. Wrap <pretalx-schedule> in overflow-x-auto container. The Pretalx
   web component renders an internal layout of ~1690px that caused
   horizontal page scroll in tablet (768) and desktop (1280). The
   shadow DOM can't be styled from outside, so the wrapper provides
   internal scroll instead of forcing page-level scroll.

Verified with Playwright at 375/768/1280: no horizontal overflow,
toggle height 62px across all breakpoints, single-row layout in
mobile.
---
 src/components/ProgramaPage.astro | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/ProgramaPage.astro b/src/components/ProgramaPage.astro
index 3bffedc..1154f3b 100644
--- a/src/components/ProgramaPage.astro
+++ b/src/components/ProgramaPage.astro
@@ -24,12 +24,6 @@ const schedule = await getSchedule()
     class="schedule-view-toggle max-w-3xl mx-auto mb-8 border border-white/10 rounded-xl p-3 flex flex-wrap items-center gap-2 bg-pycon-black/40"
   >
     <legend class="sr-only">{t.list.viewModeLegend}</legend>
-    <span
-      aria-hidden="true"
-      class="text-xs uppercase tracking-wider text-pycon-gray-25/70 px-2 font-semibold"
-    >
-      {t.list.viewModeLegend}
-    </span>
     <label
       class="cursor-pointer px-4 py-2 rounded-lg text-sm has-[:checked]:bg-pycon-orange has-[:checked]:text-pycon-black has-[:checked]:font-semibold text-pycon-gray-25 transition-colors"
     >
@@ -107,12 +101,14 @@ const schedule = await getSchedule()
   </div>
 
   <div id="schedule-grid-view" class="schedule-view" data-view="grid">
-    <pretalx-schedule
-      event-url="https://pretalx.com/pycones-2026/"
-      locale={t.locale}
-      format="grid"
-      style="--pretalx-clr-primary: #03004b; --pretalx-clr-success: #2e7d32; color-scheme: light"
-    ></pretalx-schedule>
+    <div class="overflow-x-auto max-w-full">
+      <pretalx-schedule
+        event-url="https://pretalx.com/pycones-2026/"
+        locale={t.locale}
+        format="grid"
+        style="--pretalx-clr-primary: #03004b; --pretalx-clr-success: #2e7d32; color-scheme: light"
+      ></pretalx-schedule>
+    </div>
 
     <div id="schedule-status" role="status" aria-live="polite" aria-atomic="true" class="sr-only"></div>