Tighten /events header on mobile so cards sit higher above the fold

The filter toolbar was already sticky (stays put while cards scroll under it).
This reclaims the wasted vertical space above it on phones: smaller title,
reduced top padding + margins, and the subtitle is hidden on mobile. Desktop
layout unchanged.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-09-03 14:53:53 +07:00
parent 5a0e6d21a0
commit fbb70983cd

View file

@ -1021,18 +1021,20 @@ export default function EventsPage() {
return ( return (
<Layout> <Layout>
<div className="container px-4 py-6 md:py-10 max-w-6xl mx-auto"> <div className="container px-4 py-3 md:py-10 max-w-6xl mx-auto">
{/* ── Page header ── */} {/* ── Page header ── */}
<div className="flex items-start justify-between gap-4 mb-6"> <div className="flex items-start justify-between gap-4 mb-3 md:mb-6">
<div> <div>
<h1 className="text-4xl md:text-5xl font-black uppercase leading-none mb-1"> <h1 className="text-2xl md:text-5xl font-black uppercase leading-none mb-0.5 md:mb-1">
<span className="neon-lime">SKATE</span>{' '} <span className="neon-lime">SKATE</span>{' '}
<span className="text-white"> <span className="text-white">
{mainView === 'events' ? 'EVENTS' : mainView === 'tours' ? 'TOURS' : 'HOSTING'} {mainView === 'events' ? 'EVENTS' : mainView === 'tours' ? 'TOURS' : 'HOSTING'}
</span> </span>
</h1> </h1>
<p className="text-gray-500 text-sm"> {/* Subtitle is noise on a small screen — hide it on mobile to lift
the cards above the fold. */}
<p className="hidden md:block text-gray-500 text-sm">
{mainView === 'events' {mainView === 'events'
? t('events.findEvents') ? t('events.findEvents')
: mainView === 'tours' : mainView === 'tours'