Edge panel v7 — edge-to-edge panel, tighter padding

v6 still had visible border-radius on the panel's right edge (you could see the rounded corner under "Recent" tab). v7 fixes that: panel is edge-to-edge on the right, no radius. And trims another 16px off the width (168 → 152 mobile) by removing padding everywhere.

📱 Mobile 390px
152px (39%)
MOBILE 238px app · 152px panel
9:41📶 🔋

Explore the World of Trees

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

What we offer

Books · News · Team · Resources

Get Started

Ready to bring trees to your classroom?

Footer

🏠Home
📚Books
📰News
👤Account
Structure
Inspector
🧩
Widgets
🖼
Media
Layers
🎨
Theme
📐
Layout
History
3
💬
AI Chat
📡
FvRE
🗄
PB
Triggers
📱 Tablet 768px
180px (23%)
TABLET 588px app · 180px panel
9:41📶 🔋

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
🖥️ Desktop 1440px
220px (15%)
DESKTOP 1220px app · 220px panel

Explore the World of Trees

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

What we offer

Books · News · Team · Resources · Pricing · Contact

Get Started

Structure
Inspector
🧩
Widgets
🖼
Media
Layers
🎨
Theme
📐
Layout
History
3
💬
AI Chat
📡
FvRE
🗄
PB
Triggers
🔲 The radius bug — what was wrong with v6
BUG FIX
v6 (wrong)
v7 (right)
tab bar v6
The bug: v6's panel had border-radius: 12px baked in from the phone container's rounded-corner styling. When the panel filled the right edge, you could see the rounded corner under the tab bar — looked like the panel was "floating" inside the phone frame.

The fix (v7): panel is border-radius: 0 explicitly. The panel fills the phone's content area edge-to-edge. The phone's outer bezel still has radius (28px) — that's the device frame, not the panel.

Even better: the panel could overflow the phone's inner radius entirely (extending into the bezel), but that requires position: fixed relative to the viewport, not the phone-inner. Could do that for "true fullscreen edge panel" mode.

Padding & width evolution v4 → v6 → v7

Mobile width
168px (43%)
168px (43%)
152px (39%) ✓
Tablet width
200px (26%)
200px (26%)
180px (23%) ✓
Desktop width
240px (17%)
240px (17%)
220px (15%) ✓
Panel radius
12px (rounded corners)
12px (still rounded!)
0px ✓ edge-to-edge
Tab bar radius
8px top corners
8px top corners
0px on bar, 3px on active tab
Body padding
5px 4px
5px 4px
4px 3px ✓
Cell padding
6px 2px
6px 2px
5px 1px ✓
Cell gap
4px
4px
3px ✓
Cell radius
5px
5px
4px ✓
Label size
8.5px
8.5px
8px ✓
Footer padding
5px 4px
5px 4px
4px 3px ✓
Footer btn pad
5px 2px
5px 2px
4px 2px ✓
Total width saved
0px (same as v4)
−48px (vs v6) ✓

What changed in v7

What stays from v6

The math — how v7 saved 48px