Root cause: viewport was hardcoded to width=3840 and body to
3840x2160px. If TV browser has different viewport, content
overflows and can't be zoomed to fit.
Changes:
- viewport meta: width=device-width instead of width=3840
- body: 100vw/100vh instead of fixed pixels
- App container: w-screen h-screen
- font-size: clamp(14px, 1.15vw, 24px) scales with viewport
- Topology: horizontal chain (Modem → FW → Switch) saves
vertical space, VM pills in 3-col grid, all sizes relative
- Kanban: 3-col grid, compact project cards
- All padding/gaps use rem (scale with base font)
- Removed all hardcoded pixel max-widths
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace D3 force graph with categorized grid layout for topology
(54 nodes organized by type: infrastructure, servers, PCs, etc.)
- Replace individual task cards with project summary cards
(progress bars and stage chips instead of 1700+ task cards)
- Compact node cards with status-colored backgrounds
- Better calendar empty state with centered icon
- Refined dark theme with more color depth
- Remove D3 dependency (no longer needed)
- Fix text sizes for 4K TV readability at distance
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Vite + React 18 + TypeScript scaffolding
- Tailwind CSS configured for 4K dark theme (24px base)
- Three full-screen rotating views: Network Topology (D3.js),
Kanban Board (Odoo tasks), Calendar (Odoo events)
- Hooks for data fetching, WebSocket, and view rotation
- Header with live clock and connection status
- Framer Motion fade transitions between views
- Docker Compose with backend (host network for nmap) and
frontend (nginx proxy to backend API/WS)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
