โ† back to mockups gallery ๐Ÿ“– view in HQ viewer
State mockup A019 (artifact id 19) 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 v3 โ€” icon column, much narrower

Single-column icon list instead of 2-col grid. Just the icon + name, scrollable, with tooltip on hover. Width: 140px mobile (36%), 160px tablet (21%), 180px desktop (12.5%). Most of the app is always visible. This is the "I just need quick access to the 12 tools" view โ€” minimal chrome, maximal context.

๐Ÿ“ฑ Mobile 390px
140px (36%)
MOBILE 250px app ยท 140px panel
9:41๐Ÿ“ถ ๐Ÿ”‹

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated resources.

What we offer

Books ยท News ยท Team ยท Resources

Get Started

Ready to bring trees to your classroom?

Footer

๐Ÿ Home
๐Ÿ“šBooks
๐Ÿ“ฐNews
๐Ÿ‘คAccount
โ–ฆ
Structure
Structure tree
โš™
Inspector
Section settings
๐Ÿงฉ
Widgets
Widget library
๐Ÿ–ผ
Media
Media library
โŠŸ
Layers
๐ŸŽจ
Theme
๐Ÿ“
Layout
โ†ถ
History
3
๐Ÿ’ฌ
AI Chat
๐Ÿ“ก
FvRE
๐Ÿ—„
PB
โšก
Triggers
๐Ÿ“ฑ Tablet 768px
160px (21%)
TABLET 608px app ยท 160px 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
โ†ถ
History
3
๐Ÿ’ฌ
AI Chat
๐Ÿ–ฅ๏ธ Desktop 1440px
180px (12.5%)
DESKTOP 1260px app ยท 180px panel (12.5%)

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated 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
๐ŸŽฏ Super narrow (icon-only)
72px (18%)
NARROW 318px app ยท 72px panel
9:41๐Ÿ“ถ ๐Ÿ”‹

Explore the World of Trees

Bring nature into the classroom.

What we offer

Books ยท News ยท Team

Get Started

๐Ÿ 
๐Ÿ“š
๐Ÿ“ฐ
๐Ÿ‘ค
โ–ฆ
Structure
โš™
Inspector
๐Ÿงฉ
Widgets
๐Ÿ–ผ
Media
๐ŸŽจ
Theme
โ†ถ
History
๐Ÿ’ฌ
AI Chat
๐Ÿ“ก
FvRE
๐Ÿ“ Width comparison v1 โ†’ v2 โ†’ v3
EVOLUTION
Version Mobile (390px) Tablet (768px) Desktop (1440px) Layout
v1 (first mockup) 280px / 72% 280px / 36% 280px / 19% 2-col grid
v2 (refined) 220px / 56% 280px / 36% 360px / 25% 2-col grid
v3 (current) 140px / 36% 160px / 21% 180px / 12.5% 1-col icon list
v3 super-narrow 72px / 18% 72px / 9% 72px / 5% Icon-only, no labels

Why v3 is much narrower

Width formula

What stays the same

What changes