From b30c8a4bae91c170a4f70b3e52b849d8e802ac8c Mon Sep 17 00:00:00 2001
From: "Brennan Wilkes (Text Groove)" <brennan@textgroove.com>
Date: Mon, 2 Feb 2026 18:51:56 -0800
Subject: [PATCH] UX Improvements

---
 viz/app/search_page.js | 22 +++++++++++++++-------
 viz/style.css          | 30 +++++++++++++++++++++++-------
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/viz/app/search_page.js b/viz/app/search_page.js
index 1f21214..562bec4 100644
--- a/viz/app/search_page.js
+++ b/viz/app/search_page.js
@@ -9,17 +9,24 @@ export function renderSearch($app) {
   $app.innerHTML = `
     <div class="container">
       <div class="header">
-        <div class="headerLeft">
-          <h1 class="h1">Brennan's Spirit Tracker</h1>
-          <div class="small">Search name / url / sku / store</div>
+        <!-- Row 1 -->
+        <div class="headerRow1">
+          <div class="headerLeft">
+            <h1 class="h1">Brennan's Spirit Tracker</h1>
+            <div class="small">Search name / url / sku / store</div>
+          </div>
 
-          <div class="storeBarWrap">
-            <div id="stores" class="storeBar"></div>
+          <div class="headerRight headerButtons">
+            <a class="btn btnWide" href="#/link" style="text-decoration:none;">Link SKUs</a>
+            <button class="btn btnWide" type="button" disabled>Email Notifications</button>
           </div>
         </div>
 
-        <div class="headerRight">
-          <a class="btn btnWide" href="#/link" style="text-decoration:none;">Link SKUs</a>
+        <!-- Row 2 -->
+        <div class="headerRow2">
+          <div class="storeBarWrap">
+            <div id="stores" class="storeBar"></div>
+          </div>
         </div>
       </div>
 
@@ -30,6 +37,7 @@ export function renderSearch($app) {
     </div>
   `;
 
+
   const $q = document.getElementById("q");
   const $results = document.getElementById("results");
   const $stores = document.getElementById("stores");
diff --git a/viz/style.css b/viz/style.css
index 82748dc..9b35813 100644
--- a/viz/style.css
+++ b/viz/style.css
@@ -32,24 +32,40 @@ a.skuLink:hover { text-decoration: underline; cursor: pointer; }
   padding: 18px;
 }
 
+/* header becomes 2 rows */
 .header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.headerRow1 {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 14px;
-  flex-wrap: wrap; /* keeps Link SKUs comfy on small screens */
+  flex-wrap: wrap;
 }
 
-.headerLeft {
-  flex: 1 1 520px;
-  min-width: 240px;
+.headerRow2 {
+  width: 100%;
 }
 
-.headerRight {
-  flex: 0 0 auto;
+.headerButtons {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
+/* disabled button styling */
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+
 .h1 {
   font-size: 18px;
   font-weight: 700;