📖About

Carol's Org (port 7147) was built desktop-first. Several issues on phone-sized viewports: .org-chart has min-width:1800px (always horizontal-scrolls), emp-card 240px (two siblings exceed a 375px screen), stat cards 4-up at 100px each = 400px+, trend canvas fixed 900px. Per Ninad: 'can you make carol's org mobile friendly?' Tighten card sizes + drop artificial min-width + responsive canvas + smaller stat cards on ≤480px. Tree's structural side-by-side will still scroll on narrow phones — that's inherent to a hierarchy of siblings.

⚖️Decisions

• Drop the .org-chart min-width:1800px floor. Let the tree size to the actual content; horizontal scroll only when content genuinely overflows. — The 1800px floor was added to keep the tree from collapsing into nothing when empty, but it now forces unnecessary scroll on every viewport. (Orion)
• Tighter emp-card on ≤480px: 160px wide, 90px min-height, 9px padding. Smaller font. — Lets two siblings fit side-by-side on tablets and small laptops; on phones still readable. (Orion)
• Stat card row uses flex-wrap on narrow screens; min-width:80px on phones; smaller numbers. — Currently 4 cards × 100px overflow even on 375px. (Orion)
• Trend chart canvas: max-width:100% with auto height; remove the 900px fixed. — Responsive width is standard for canvas charts; the chart library can render at any width. (Orion)

✅Success criteria

• grep 'min-width: 1800px' apps/org/index.html returns 0 occurrences (or only inside an @media min-width:N block). (must_have)
• Mobile DOM-tools 375px viewport: no horizontal page scroll on Stats/Designations/Departments tabs (tree tab can still scroll within its container). (must_have)
• Trend canvas resizes to viewport width on small screens. (must_have)
• Regression diff vs prior run: 0 NEW FAILURE. (must_have)