← Back
โ† 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