Skip to content

Commit e5bbc51

Browse files
committed
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.
1 parent 8c2fde7 commit e5bbc51

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)