Samsung-style edge panel v2 — additive, 33% max width, dock untouched

The edge panel is a second way to see the same tools, NOT a replacement for the 4-edge dock. The dock stays. The edge panel is the "I'm lost, show me everything" view. Width: 220px mobile (56%), 280px tablet (36%), 360px desktop (25% at 1440px), capped at 33vw.

📱 Mobile 390px
PANEL 220px (56%)
MOBILE 170px free · 220px panel
9:41📶 🔋
S-1

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

S-3

What we offer

Books · News · Team · Resources

S-5

Get Started

Ready to bring trees to your classroom?

Footer

🏠Home
📚Books
📰News
👤Account
Structure
Inspector
🧩
Widgets
🖼
Media
Layers
🎨
Theme
History
3
💬
AI Chat
Bottom bar
📱 Tablet 768px
PANEL 280px (36%)
TABLET 200px free · 280px panel
9:41📶 🔋

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources that make learning about trees fun, engaging, and meaningful.

What we offer

Books · News · Team · Resources · Pricing · Contact

Get Started

Structure
Inspector
🧩
Widgets
🖼
Media
Layers
🎨
Theme
📐
Layout
History
3
💬
AI Chat
📡
FvRE
Bottom bar
🖥️ Desktop 1440px
PANEL 360px (25%)
DESKTOP 1080px free · 360px panel (25% — under 33% cap)
🏠
📚
📰
👥
⚙️

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

What we offer

Books · News · Team · Resources · Pricing

Get Started

Structure
Inspector
🧩
Widgets
🖼
Media
Layers
🎨
Theme
📐
Layout
History
3
💬
AI Chat
📡
FvRE
🗄
PB
Triggers
Bottom bar
📐 Width rules
RESPONSIVE

Breakpoints

  • Mobile (≤600px): 220px panel (~56% of 390px viewport)
  • Tablet (601-1023px): 280px panel (~36% of 768px)
  • Desktop (≥1024px): 360px panel (~25% of 1440px)
  • Hard cap: max-width: 33vw — never more than ⅓ of viewport, no matter the screen
Why 33%? Samsung's edge panel is consistently 22-30% of screen width across devices. 33% is the upper bound — a panel wider than that starts hiding the app's content. 170px of free space (mobile) is enough to keep the page interactive behind the scrim.

Operator can resize

  • Drag the left edge of the panel inward or outward
  • Min: 200px (below that 2-col grid breaks)
  • Max: 33vw (the cap)
  • Resized width persists in localStorage
🔗 Coexistence with 4-edge dock
ADDITIVE

The dock stays exactly as it is

  • 4-edge dock: same pills, same drag/dock logic, same panel system. No changes.
  • Edge panel: a separate, additive floating panel that gives a stronger overview
  • Both can be open at the same time — the dock's pills become mini "minimize to dock" actions inside the edge panel

What the edge panel is for

  • "I'm lost, where am I?" — Structure tab is right there in 2-col grid
  • "What tools do I have?" — 12 icons visible at once, all clickable
  • "Quick add" — persistent footer, no scrolling
  • "Recent activity" — Recent tab shows where I've been

What the edge panel is NOT

  • It's not a replacement for the dock
  • It's not the only entry point — pills still work
  • It doesn't move dock panels or take over their state
  • It doesn't change the Dev toggle or setDevMode

When you click an icon in the edge panel

  • The edge panel slides out (or stays — user setting)
  • The corresponding dock panel opens on its dock (Structure on the left, Inspector on the right, etc.)
  • The page focuses on that tool
  • Same behavior as clicking the dock pill directly
📱 Samsung edge panel reference
REAL-WORLD MATCH
Galaxy S24 (412px)
Edge panel width: ~340px
Percentage: ~82%
Single-hand reach priority — covers most of screen on phone
Galaxy Tab (800px)
Edge panel width: ~280px
Percentage: ~35%
Tablet — narrower relative
Our Mobile (390px)
Edge panel width: 220px
Percentage: 56%
Narrower than Samsung (operator wants to see app behind)
Our Desktop (1440px)
Edge panel width: 360px
Percentage: 25%
Under 33% cap. Plenty of app visible.

Key decisions (the thinking through)

1. Width — 33% max, but use Samsung's actual numbers as floor

2. Additive, not replacement

3. Entry points stay the same

4. The 2-col grid stays the right call

5. Footer is the + Section / + Container / + Widget

6. Tabs grow into the future

7. What I did NOT change