← back to mockups gallery 📖 view in HQ viewer
State mockup A023 (artifact id 23) file mtime 2026-07-28 08:24:05 UTC thread: pre-HQ (uploaded before Mavis HQ existed)
Samsung edge panel design exploration — 7 mockups, 35 min of iteration
These 7 standalone HTML mockups are the design exploration that produced freshvibe-cms@46bbfa3 feat(edge-panel): add generic CMS edge tools panel (v0.4.2) on 2026-07-28 10:30:05 UTC. The 2-col grid (Samsung pattern), the "show me everything" framing, and the dock-conflict mitigation all appear here before they appear in code. Uploaded directly to VPS (no Mavis session tracked) — predates Mavis HQ by ~30 hours. See runtime/edge-panel/edge-panel.js in freshvibe-cms@46bbfa3 for the implementation that shipped.

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