admin
526 lines
22 KiB
HTML
526 lines
22 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Pinkudex · Dropdown vs. ACTIVE strip — 10 fixes</title>
|
||
<style>
|
||
:root {
|
||
--bg-0: #0a0710;
|
||
--bg-1: #14101e;
|
||
--bg-2: #1c1729;
|
||
--fg: #e8e6f0;
|
||
--fg-dim: #a8a4b8;
|
||
--fg-muted: #6e6a80;
|
||
--cyan: #22d3ee;
|
||
--violet: #a78bfa;
|
||
--mint: #34d399;
|
||
--coral: #fb7185;
|
||
--amber: #fbbf24;
|
||
--glass: rgba(255,255,255,0.04);
|
||
--glass-strong: rgba(255,255,255,0.08);
|
||
--border: rgba(255,255,255,0.08);
|
||
--border-strong: rgba(255,255,255,0.18);
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0; background: var(--bg-0); color: var(--fg);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||
line-height: 1.45;
|
||
}
|
||
.page { max-width: 1500px; margin: 0 auto; padding: 24px; }
|
||
.page-header {
|
||
margin-bottom: 24px; padding: 16px 20px; border-radius: 16px;
|
||
background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(167,139,250,0.05));
|
||
border: 1px solid var(--border);
|
||
}
|
||
.page-header h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
|
||
.page-header p { margin: 0; color: var(--fg-dim); font-size: 13px; }
|
||
|
||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||
|
||
.variant {
|
||
border: 1px solid var(--border); border-radius: 14px; background: var(--bg-1);
|
||
overflow: hidden;
|
||
}
|
||
.variant-head {
|
||
padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--glass);
|
||
display: flex; align-items: center; gap: 12px;
|
||
}
|
||
.variant-num {
|
||
width: 26px; height: 26px; border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--cyan), var(--violet));
|
||
display: grid; place-items: center;
|
||
font-weight: 700; font-size: 12px; color: #0a0710;
|
||
flex-shrink: 0;
|
||
}
|
||
.variant-title { font-size: 15px; font-weight: 600; }
|
||
.variant-desc { color: var(--fg-dim); font-size: 12px; }
|
||
.variant-body {
|
||
padding: 24px 18px; background: var(--bg-0);
|
||
min-height: 320px;
|
||
display: flex; align-items: flex-start; justify-content: center;
|
||
}
|
||
|
||
/* shared bits */
|
||
.toolbar {
|
||
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
|
||
}
|
||
.pill {
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
padding: 5px 12px; border-radius: 999px;
|
||
background: var(--glass); border: 1px solid var(--border-strong);
|
||
font-size: 12px; color: var(--fg-dim);
|
||
white-space: nowrap; min-width: 100px; justify-content: space-between;
|
||
}
|
||
.pill .cv { font-size: 9px; opacity: 0.5; }
|
||
.pill.all { background: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.4); color: var(--cyan); min-width: auto; }
|
||
.pill.active { background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.4); color: var(--cyan); }
|
||
.pill.disabled { opacity: 0.4; }
|
||
.pill .badge {
|
||
background: var(--cyan); color: #0a0710; padding: 0 5px;
|
||
border-radius: 999px; font-size: 9px; font-weight: 700;
|
||
font-family: ui-monospace, monospace; min-width: 16px;
|
||
height: 16px; display: inline-grid; place-items: center;
|
||
}
|
||
|
||
.strip {
|
||
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
|
||
padding: 6px 10px; border: 1px dashed var(--border-strong);
|
||
background: rgba(34,211,238,0.05);
|
||
border-radius: 10px;
|
||
font-size: 11px;
|
||
margin-top: 8px;
|
||
}
|
||
.strip .label {
|
||
color: var(--fg-muted); font-family: ui-monospace, monospace;
|
||
font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
|
||
margin-right: 4px;
|
||
}
|
||
.chip {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 2px 4px 2px 10px; border-radius: 999px;
|
||
background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.4);
|
||
color: var(--cyan); font-family: ui-monospace, monospace; font-size: 11px;
|
||
}
|
||
.chip.amber { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.4); color: var(--amber); }
|
||
.chip.violet { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.4); color: var(--violet); }
|
||
.chip .x { padding: 0 4px; opacity: 0.6; cursor: pointer; }
|
||
|
||
.dropdown {
|
||
background: var(--bg-0);
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 12px;
|
||
box-shadow: 0 16px 40px rgba(0,0,0,0.6);
|
||
width: 320px; padding: 14px;
|
||
color: var(--fg-dim); font-size: 13px;
|
||
}
|
||
.dropdown .row { padding: 6px 0; display: flex; gap: 8px; }
|
||
.dropdown .row.on { color: var(--cyan); }
|
||
.dropdown .seg {
|
||
display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
|
||
margin: 2px 0;
|
||
}
|
||
.dropdown .seg .opt {
|
||
flex: 1; text-align: center; padding: 4px;
|
||
font-size: 10px; color: var(--fg-muted); font-family: ui-monospace, monospace;
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
.dropdown .seg .opt:last-child { border: 0; }
|
||
.dropdown .seg .opt.on { background: rgba(34,211,238,0.2); color: var(--cyan); }
|
||
|
||
.arrow {
|
||
color: var(--coral); font-size: 18px; align-self: center;
|
||
margin: 0 4px;
|
||
}
|
||
.note { color: var(--fg-muted); font-size: 11px; padding: 6px 0; font-style: italic; }
|
||
|
||
/* layout helpers per variant */
|
||
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
|
||
.canvas {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
background: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0));
|
||
padding: 10px;
|
||
border: 1px solid var(--border);
|
||
min-height: 280px;
|
||
position: relative;
|
||
}
|
||
.placeholder {
|
||
height: 60px; border: 1px dashed var(--border); border-radius: 8px;
|
||
margin-top: 8px;
|
||
display: grid; place-items: center; color: var(--fg-muted);
|
||
font-size: 11px; font-style: italic;
|
||
}
|
||
.pos-rel { position: relative; }
|
||
.pop-down { position: absolute; left: 220px; top: 38px; z-index: 4; }
|
||
.pop-up { position: absolute; left: 220px; bottom: 38px; z-index: 4; }
|
||
.pop-side { position: absolute; left: calc(100% + 6px); top: 0; z-index: 4; }
|
||
|
||
.pick {
|
||
margin: 32px 0 12px; padding: 14px 18px;
|
||
border-radius: 12px; background: rgba(52,211,153,0.07);
|
||
border: 1px solid rgba(52,211,153,0.25); color: var(--mint); font-size: 13px;
|
||
}
|
||
.pick strong { color: var(--mint); }
|
||
.pick em { color: var(--fg); font-style: normal; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<div class="page-header">
|
||
<h1>Active strip vs. dropdown — 10 fixes</h1>
|
||
<p>Currently the Filter dropdown opens downward and covers the ACTIVE strip below the toolbar. 10 ways to solve it.</p>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- 1 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">1</div>
|
||
<div>
|
||
<div class="variant-title">Move ACTIVE above the toolbar</div>
|
||
<div class="variant-desc">Strip pinned to the top. Dropdown opens down into empty space, never collides.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas">
|
||
<div class="strip">
|
||
<span class="label">ACTIVE</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
</div>
|
||
<div style="height: 8px;"></div>
|
||
<div class="toolbar pos-rel">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
|
||
<div class="pop-down">
|
||
<div class="dropdown">
|
||
<div class="row on">◆ VIP ✓</div>
|
||
<div class="row on amber" style="color: var(--amber);">★ Favorite ✓</div>
|
||
<div class="row on violet" style="color: var(--violet);">▣ Owned ✓</div>
|
||
<div class="row">⊖ Unmarked</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="placeholder">Cover grid</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">2</div>
|
||
<div>
|
||
<div class="variant-title">Open dropdown upward</div>
|
||
<div class="variant-desc">Drop direction flips when the strip is present. Strip stays put.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas" style="padding-top: 80px;">
|
||
<div class="toolbar pos-rel">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
|
||
<div class="pop-up">
|
||
<div class="dropdown">
|
||
<div class="row on">◆ VIP ✓</div>
|
||
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
|
||
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
|
||
<div class="row">⊖ Unmarked</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="strip">
|
||
<span class="label">ACTIVE</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
</div>
|
||
<div class="placeholder">Cover grid</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">3</div>
|
||
<div>
|
||
<div class="variant-title">Inline expand (push, don't overlay)</div>
|
||
<div class="variant-desc">Dropdown is part of the flow. Opening it slides everything below down.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas">
|
||
<div class="toolbar">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▴</span></span>
|
||
</div>
|
||
<div class="dropdown" style="margin-top: 6px; width: 100%;">
|
||
<div class="row on">◆ VIP ✓ <span style="color: var(--amber);">★ Favorite ✓</span> <span style="color: var(--violet);">▣ Owned ✓</span> ⊖ Unmarked</div>
|
||
</div>
|
||
<div class="strip">
|
||
<span class="label">ACTIVE</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
</div>
|
||
<div class="placeholder">Cover grid (pushed down)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">4</div>
|
||
<div>
|
||
<div class="variant-title">Chips inside the dropdown header</div>
|
||
<div class="variant-desc">Active state lives inside the popover top — visible while editing, vanishes when closed.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas">
|
||
<div class="toolbar pos-rel">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
|
||
<div class="pop-down">
|
||
<div class="dropdown">
|
||
<div class="strip" style="margin: 0 0 10px 0;">
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
</div>
|
||
<div class="row">◆ VIP ✓</div>
|
||
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
|
||
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
|
||
<div class="row">⊖ Unmarked</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="placeholder">Cover grid (no strip below)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">5</div>
|
||
<div>
|
||
<div class="variant-title">Sidebar dropdown — opens to the right</div>
|
||
<div class="variant-desc">Popover anchors to the side of the button. Below stays untouched.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas">
|
||
<div class="toolbar pos-rel">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active" style="position: relative;">
|
||
<span>🔖 Filter <span class="badge">3</span></span><span class="cv">▸</span>
|
||
<div class="pop-side">
|
||
<div class="dropdown">
|
||
<div class="row on">◆ VIP ✓</div>
|
||
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
|
||
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
|
||
</div>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
<div class="strip">
|
||
<span class="label">ACTIVE</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
</div>
|
||
<div class="placeholder">Cover grid</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">6</div>
|
||
<div>
|
||
<div class="variant-title">Auto-flip based on space</div>
|
||
<div class="variant-desc">If chips are below, open up. If at top of page, open down. Hands-off heuristic.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas" style="padding-top: 80px;">
|
||
<div class="toolbar pos-rel">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▴</span></span>
|
||
<div class="pop-up">
|
||
<div class="dropdown">
|
||
<div class="row on">◆ VIP ✓</div>
|
||
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="strip">
|
||
<span class="label">ACTIVE</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
</div>
|
||
<div class="note">Same control, but opens up only when the strip is present below. Down otherwise.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">7</div>
|
||
<div>
|
||
<div class="variant-title">Floating chip dock — bottom of viewport</div>
|
||
<div class="variant-desc">Chips never live in the toolbar's vertical column at all.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas" style="padding-bottom: 60px; position: relative;">
|
||
<div class="toolbar pos-rel">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
|
||
<div class="pop-down">
|
||
<div class="dropdown">
|
||
<div class="row on">◆ VIP ✓</div>
|
||
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
|
||
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
|
||
<div class="row">⊖ Unmarked</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="placeholder">Cover grid</div>
|
||
<div style="position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);">
|
||
<div class="strip" style="background: var(--bg-1); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0,0,0,0.6);">
|
||
<span class="label">ACTIVE</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">8</div>
|
||
<div>
|
||
<div class="variant-title">Drawer style — full-width slide from top</div>
|
||
<div class="variant-desc">Filter expands as a horizontal drawer. Strip stays visible because the drawer occupies its own row above.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas">
|
||
<div class="toolbar">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▴</span></span>
|
||
</div>
|
||
<div style="margin-top: 8px; padding: 12px; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: 12px; display: flex; gap: 18px; flex-wrap: wrap;">
|
||
<div style="font-family: ui-monospace, monospace; font-size: 10px; color: var(--cyan); text-transform: uppercase;">Marks · ✓ VIP ✓ Favorite ✓ Owned ⊖ Unmarked</div>
|
||
<div style="font-family: ui-monospace, monospace; font-size: 10px; color: var(--cyan); text-transform: uppercase;">Watch · 👁 ALL ★ ALL</div>
|
||
<div style="font-family: ui-monospace, monospace; font-size: 10px; color: var(--cyan); text-transform: uppercase;">Has · 📂 ALL 🏷 ALL</div>
|
||
</div>
|
||
<div class="strip">
|
||
<span class="label">ACTIVE</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
</div>
|
||
<div class="placeholder">Cover grid</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">9</div>
|
||
<div>
|
||
<div class="variant-title">Hide strip while popover open</div>
|
||
<div class="variant-desc">Strip fades out when the popover opens (chips visible inside the popover instead). Restores on close.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas">
|
||
<div class="toolbar pos-rel">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
|
||
<div class="pop-down">
|
||
<div class="dropdown">
|
||
<div class="row on">◆ VIP ✓</div>
|
||
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
|
||
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
|
||
<div class="row">⊖ Unmarked</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="strip" style="opacity: 0.18;">
|
||
<span class="label">ACTIVE</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
</div>
|
||
<div class="note">Strip dimmed (or hidden) while menu open; reappears when closed.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10 -->
|
||
<div class="variant">
|
||
<div class="variant-head">
|
||
<div class="variant-num">10</div>
|
||
<div>
|
||
<div class="variant-title">Toolbar & strip share a row</div>
|
||
<div class="variant-desc">Strip lives <em>inside</em> the toolbar to the right of the buttons. Dropdown opens below, but there's nothing for it to cover.</div>
|
||
</div>
|
||
</div>
|
||
<div class="variant-body">
|
||
<div class="canvas">
|
||
<div class="toolbar pos-rel" style="flex-wrap: nowrap; overflow-x: auto;">
|
||
<span class="pill all">ALL</span>
|
||
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
|
||
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
|
||
<span class="pill disabled"><span>🏷 Mark As</span><span class="cv">▾</span></span>
|
||
<span style="margin: 0 4px; color: var(--fg-muted);">|</span>
|
||
<span class="chip">VIP <span class="x">×</span></span>
|
||
<span class="chip amber">Favorite <span class="x">×</span></span>
|
||
<span class="chip violet">Owned <span class="x">×</span></span>
|
||
<div class="pop-down">
|
||
<div class="dropdown">
|
||
<div class="row on">◆ VIP ✓</div>
|
||
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
|
||
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
|
||
<div class="row">⊖ Unmarked</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="placeholder" style="margin-top: 60px;">Cover grid</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="pick">
|
||
<strong>My pick: #1 (move ACTIVE above the toolbar).</strong> Simplest fix, no popover gymnastics, chips stay readable while editing because the strip is now permanently above the dropdown anchor. <em>Runner-up: #2 (open upward)</em> — keeps the page chrome unchanged but flips the menu direction when chips are present.
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|