Mockup — Structure Resize (3 modes)

Same editing primitives, three layouts. The device / mode decides the chrome — not the panel. Column resize is gated on actual column count and viewport width.

🖥️ Desktop (≥1024px)

STRUCTURE-PANEL-RESIZE

STRUCTURE

⋮⋮ ▭ S-1 · Hero

⋮⋮ ▦ S-2 · 3 col

⋮⋮ ▦ S-3 · 33%

⋮⋮ ▦ S-4 · 33%

⋮⋮ ▦ S-5 · 34%

⋮⋮ ▭ S-6 · CTA

⋮⋮ ▭ S-7 · Footer

S-1

Explore the World of Trees

Bring nature into the classroom. Hover section → dashed green line at edge.

S-3

Books

S-4

News

S-5

Contact

S-6

CTA section

Hover → dashed line at bottom edge, drag to resize height.

S-7

Footer (auto height, no resize)

📱 Tablet (768-1023px)

STRUCTURE-PANEL-RESIZE

Structure

⋮⋮ ▭ S-1 · Hero

⋮⋮ ▦ S-2 · 2 col

⋮⋮ ▦ S-3 · 50%

⋮⋮ ▦ S-4 · 50%

⋮⋮ ▭ S-5 · CTA

⋮⋮ ▭ S-6 · Footer

S-1

Explore the World of Trees

Tablet mode: tree is narrower (220px), content fills the rest.

S-3

Wide · 50%

S-4

Wide · 50%

S-5

CTA · Get Started

Tablet sections get green pill on hover for height resize.

📱 Mobile (<768px)

SHEET-MODE

S-1

Explore Trees

Single column. Auto height — no resize needed.

S-2

Stacks to single column on mobile. No column resize — there's only 1 visible column.

S-3

CTA

S-4

Footer

👆

Tap section in tree to scroll. Long-press = menu. No height pills on mobile.

Why 3 modes (the thinking-through):

Desktop (≥1024px) — full Structure panel left, content right. Dashed lines on hover for height + column resize. 3+ columns supported. Snap to 100/200/400/600/800px and 25/33/50/66/75%.
Tablet (768–1023px) — same panel layout, narrower tree (220px). Dashed lines still work (touch events handle them). Usually 2 columns max. Snap targets stay the same.
Mobile (<768px) — different beast. Structure becomes a bottom sheet (swipe up). No column resize because content stacks to 1 column. Sections are auto-height by default — no pill, no drag. Only on long-form sections does a tall green pill appear. Long-press = menu (edit/duplicate/delete).
The rule: the device decides the affordance. Don't shrink a desktop pattern — design for the constraint.
Detect "request desktop site": if the page is in mobile-width but the user has set desktop UA preference, the dashed lines still appear. This is just `pointer: fine` vs `pointer: coarse` from CSS.

Structure Panel + Resize — 3 modes

Explore the World of Trees

CTA section

Explore the World of Trees

CTA · Get Started

Explore Trees

CTA

Why 3 modes (the thinking-through):