Skip to content

Commit 4765ddf

Browse files
authored
fix(programa): responsive issues in view-mode toggle and grid view (#222)
## Summary Two small responsive fixes for `/programa`. ### 1. Remove redundant view-mode label The `<span>` displaying "Schedule view mode" was redundant with the radio labels ("List" / "Visual grid") and forced the fieldset to wrap to two rows on mobile (375px), making the toggle 86px tall. The accessible `<legend>` remains for screen readers. ### 2. Wrap `<pretalx-schedule>` in overflow 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 a `max-w-full overflow-x-auto` wrapper provides internal scroll instead of forcing page-level scroll. ## Verification Playwright at 375 / 768 / 1280: - No horizontal overflow on list or grid view - Toggle height 62px across all breakpoints, single-row layout on mobile ## Files changed - `src/components/ProgramaPage.astro` (+8 / -12)
1 parent 8c2fde7 commit 4765ddf

1 file changed

Lines changed: 8 additions & 12 deletions

File tree

src/components/ProgramaPage.astro

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,6 @@ const schedule = await getSchedule()
2424
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"
2525
>
2626
<legend class="sr-only">{t.list.viewModeLegend}</legend>
27-
<span
28-
aria-hidden="true"
29-
class="text-xs uppercase tracking-wider text-pycon-gray-25/70 px-2 font-semibold"
30-
>
31-
{t.list.viewModeLegend}
32-
</span>
3327
<label
3428
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"
3529
>
@@ -107,12 +101,14 @@ const schedule = await getSchedule()
107101
</div>
108102

109103
<div id="schedule-grid-view" class="schedule-view" data-view="grid">
110-
<pretalx-schedule
111-
event-url="https://pretalx.com/pycones-2026/"
112-
locale={t.locale}
113-
format="grid"
114-
style="--pretalx-clr-primary: #03004b; --pretalx-clr-success: #2e7d32; color-scheme: light"
115-
></pretalx-schedule>
104+
<div class="overflow-x-auto max-w-full">
105+
<pretalx-schedule
106+
event-url="https://pretalx.com/pycones-2026/"
107+
locale={t.locale}
108+
format="grid"
109+
style="--pretalx-clr-primary: #03004b; --pretalx-clr-success: #2e7d32; color-scheme: light"
110+
></pretalx-schedule>
111+
</div>
116112

117113
<div id="schedule-status" role="status" aria-live="polite" aria-atomic="true" class="sr-only"></div>
118114

0 commit comments

Comments
 (0)