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;