โ† back to mockups gallery ๐Ÿ“– view in HQ viewer
State mockup A020 (artifact id 20) 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 v4 โ€” 2-col grid, tight padding, much narrower

Kept the 2-col grid (you liked it), but trimmed padding ruthlessly. 168px mobile (43%), 200px tablet (26%), 240px desktop (17%). Cells are tighter: 5px padding (was 10-12px), 3px gap (was 6-8px), 8px labels (was 9-10px), 14px icons (was 18-22px). 12 tools still fit in a 168px column. Most of the app stays visible.

๐Ÿ“ฑ Mobile 390px
168px (43%)
MOBILE 222px app ยท 168px panel ยท 2-col
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
โš™
Inspector
๐Ÿงฉ
Widgets
๐Ÿ–ผ
Media
โŠŸ
Layers
๐ŸŽจ
Theme
๐Ÿ“
Layout
โ†ถ
History
3
๐Ÿ’ฌ
AI Chat
๐Ÿ“ก
FvRE
๐Ÿ—„
PB
โšก
Triggers
๐Ÿ“ฑ Tablet 768px
200px (26%)
TABLET 568px app ยท 200px panel ยท 2-col
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
240px (17%)
DESKTOP 1200px app ยท 240px panel (17%)

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
๐Ÿ“ Width comparison v1 โ†’ v2 โ†’ v3 โ†’ v4
EVOLUTION
Version Mobile (390px) Tablet (768px) Desktop (1440px) Layout Notes
v1 280px (72%) 280px (36%) 280px (19%) 2-col, generous padding First try โ€” too wide on mobile
v2 220px (56%) 280px (36%) 360px (25%) 2-col, generous padding Refined โ€” still hides too much app
v3 140px (36%) 160px (21%) 180px (12.5%) 1-col icon list Wrong โ€” single column loses the grid
v4 โœ“ 168px (43%) 200px (26%) 240px (17%) 2-col, tight padding Best โ€” keeps 2-col, app stays visible

What changed in v4

Why 168px is the right mobile width

What stays unchanged from v2

What gets archived (mockups as historical record)