designing-tv-display-layout

name	designing-tv-display-layout
description	Designs a fixed-viewport layout optimized for TV/large screen display with responsive mobile fallback. Covers 75% width constraint, overflow control, three-section layout, and auto-scroll. Use when building a full-screen display for TVs or kiosks.

Designing a TV Display Layout

Core Principle

Fills entire screen with no scrolling on desktop/TV. On mobile, becomes scrollable.

Page Structure

<div className="w-screen min-h-screen lg:h-screen bg-navy lg:overflow-hidden flex justify-center">
  <AuroraBackground />
  <ShootingStars />

  {/* Content — 75% width on large screens */}
  <div className="w-full lg:w-[75%] h-full flex flex-col lg:overflow-hidden relative z-10">
    <Header />
    <main className="flex-1 flex flex-col lg:overflow-hidden lg:min-h-0
                     px-4 py-4 gap-5 lg:px-20 lg:py-10 lg:gap-10">
      {/* Content sections */}
    </main>
  </div>

  {/* QR code — desktop only, fixed top-right */}
  <div className="hidden lg:flex fixed top-6 right-6 z-20">...</div>
</div>

Width Constraint

lg:w-[75%] with flex justify-center prevents content from stretching edge-to-edge on TVs. Leaves room for aurora background visibility.