At which specific viewport widths do layout constraints force content reallocation, and what is the progressive degradation path (stack vs. hide vs. drawer vs. defer)? (a sub-question that arises while solving: What is the best way to display concept mapping and diagram trees in this app (a software application) for the concepts being shown?)

# Analysis: Layout Constraints & Responsive Behavior

This is **UNDER-DETERMINED**. I need more data.

## Missing Inputs Required

1. **Viewport breakpoints** — Define your target devices. - Mobile (320px? 375px? 480px?) - Tablet (768px? 820px?) - Desktop (1024px+?) - Are there specific constraints you're designing for?

2. **Content characteristics** — What's the nature of what needs reallocation? - How wide are concept maps/trees at full scale? - How many nodes typically? Depth vs. breadth? - Are they interactive (pan/zoom) or static?

3. **Degradation priorities** — What matters most on small screens? - Read the map? Navigate it? Filter it? - Is hiding acceptable, or must everything remain accessible? - Do users need full context or just task-focused views?

4. **App context** — What *is* this software application? - Educational tool? Knowledge base? Design documentation? - Professional/technical users or general audience? - Mobile-first or desktop-primary?

## For Your Sub-Question: Concept Maps & Diagram Trees

**Common responsive patterns** (pending your specifics):

| Viewport | Pattern | Rationale | |----------|---------|-----------| | **Large (1200px+)** | Full tree, pan-enabled | Context visibility | | **Medium (768–1199px)** | Collapsible subtrees, accordion | Manageable chunks | | **Small (480–767px)** | Stack vertically OR drawer nav | Forced focus | | **Tiny (<480px)