diff --git a/viz/app/search_page.js b/viz/app/search_page.js index 562bec4..6a31af4 100644 --- a/viz/app/search_page.js +++ b/viz/app/search_page.js @@ -97,9 +97,17 @@ export function renderSearch($app) { return; } + const half = Math.ceil(stores.length / 2); + $stores.innerHTML = stores - .map((s) => `${esc(s)}`) + .map((s, i) => { + const btn = `${esc(s)}`; + const brk = i === half - 1 && stores.length > 1 ? `` : ""; + return btn + brk; + }) .join(""); + + } function renderAggregates(items) { diff --git a/viz/style.css b/viz/style.css index facd2f3..188d026 100644 --- a/viz/style.css +++ b/viz/style.css @@ -310,10 +310,9 @@ a.skuLink:hover { text-decoration: underline; cursor: pointer; } gap:8px; flex-wrap:wrap; width:100%; - justify-content:space-evenly; + justify-content: space-between; /* spread each row to fill */ } - .storeBtn { border: 1px solid var(--border); background: #0f1318; @@ -325,6 +324,16 @@ a.skuLink:hover { text-decoration: underline; cursor: pointer; } display: inline-flex; align-items: center; } +.storeBreak { + flex-basis: 100%; + width: 0; + height: 0; +} + +/* let mobile wrap naturally */ +@media (max-width: 640px) { + .storeBreak { display: none; } +} .storeBtn:hover { border-color: #2f3a46;