diff --git a/src/components/ScheduleCarousel.tsx b/src/components/ScheduleCarousel.tsx index a45e640..fa91015 100644 --- a/src/components/ScheduleCarousel.tsx +++ b/src/components/ScheduleCarousel.tsx @@ -109,10 +109,11 @@ export function ScheduleCarousel({ days }: { days: ScheduleCard[] }) { aria-label="Tage im Camp" // Per Tastatur scrollbar (Pfeiltasten), WCAG 2.1.1. tabIndex={0} - // Smartphone: Karten ragen bis an den Rand, die naechste lugt hervor. + // Smartphone: Karte 85vw breit und mittig (7,5vw Rand links und + // rechts), Nachbarkarten lugen an beiden Seiten hervor. // Ab md: Karten passen vollstaendig in den Inhaltsbereich (2 bzw. 3 // nebeneinander), nichts wird am Rand abgeschnitten. - className="-mx-4 flex snap-x snap-mandatory scroll-px-4 gap-4 overflow-x-auto px-4 pb-4 [scrollbar-width:none] md:mx-0 md:scroll-px-0 md:gap-6 md:px-0 [&::-webkit-scrollbar]:hidden" + className="-mx-4 flex snap-x snap-mandatory scroll-px-[7.5vw] gap-4 overflow-x-auto px-[7.5vw] pb-4 [scrollbar-width:none] sm:scroll-px-4 sm:px-4 md:mx-0 md:scroll-px-0 md:gap-6 md:px-0 [&::-webkit-scrollbar]:hidden" > {days.map((day, index) => (
  • { cards.current[index] = el; }} - className="flex w-[85%] shrink-0 snap-start flex-col rounded-2xl bg-paper p-6 shadow-[0_1px_0_var(--color-line)] sm:w-[62%] md:w-[calc((100%-1.5rem)/2)] md:p-8 lg:w-[calc((100%-3rem)/3)]" + className="flex w-[85vw] shrink-0 snap-start flex-col rounded-2xl bg-paper p-6 shadow-[0_1px_0_var(--color-line)] sm:w-[62%] md:w-[calc((100%-1.5rem)/2)] md:p-8 lg:w-[calc((100%-3rem)/3)]" >

    {day.label} ยท {day.title} diff --git a/src/components/sections/PeopleSections.tsx b/src/components/sections/PeopleSections.tsx index b1fc8ca..39968e4 100644 --- a/src/components/sections/PeopleSections.tsx +++ b/src/components/sections/PeopleSections.tsx @@ -44,7 +44,7 @@ export function TeamSection({ showDrafts, portraits }: { showDrafts: boolean; po