Family Dashboard Fixes Design

Date: 2026-03-01 Status: Implemented

Problems

1. Landscape Photos Hide Panel B

When a landscape photo appears in the photo frame, KioskBottomSection switches to a single-column grid and hides the rotating panel (display: none). Panel B content (horoscopes, transit, country-of-day) disappears for the entire 12-minute photo rotation.

2. Jumpy News Ticker

The horizontal CSS translateX animation scrolls a wide duplicated element across the screen at 50px/s. On the Pi’s GPU, this produces visible stutter/jank.

3. Stale Countdown Items

The countdown list includes 5 Berlin school holiday entries (winter, easter, autumn, christmas break) that aren’t high-value. User wants only summer break + school starts alongside birthdays and major holidays.

Solutions

1. Always Show Panel B — object-fit: contain

• Remove all landscape orientation detection (PhotoOrientation type, onOrientationChange callback, data-orientation attribute)
• Keep the 55fr 45fr grid split permanently
• Change photo object-fit from cover to contain — landscape photos display fully within their 55% column with letterboxing, portrait photos still fill naturally
• Panel B is always visible regardless of photo orientation

Files changed: KioskBottomSection.tsx, KioskPhotoFrame.tsx, index.css

2. Slide-Up Carousel Ticker

Replace horizontal scroll with a vertical slide-up carousel: - One headline visible at a time, full width with text-overflow: ellipsis - Every 8 seconds, current headline slides up and out while next slides up from below - 400ms ease-out transition on translateY — GPU-composited, single-element transform - No wide scrolling content = no stutter on Pi - Keeps the existing 15-minute news refresh via useNewsTicker hook

Files changed: KioskNewsTicker.tsx, index.css

3. Streamlined Countdown List

Kept: 4 family birthdays, Easter (computed), Halloween, Christmas Removed: Winter Break, Easter Break, Autumn Break, Christmas Break Added: School Starts (Aug 24, 2026) Kept: Summer Break (Jul 9, 2026)

Final: 9 event types with current/next year duplicates where applicable.

Files changed: countdowns.ts