From 0b0ae291d03da6baf27157f72a121586ceedfb39 Mon Sep 17 00:00:00 2001
From: Dilan Gilluly <gillulyd@gmail.com>
Date: Sun, 19 Oct 2025 21:35:18 -0400
Subject: [PATCH] (change): MM revamp, scroll behavior

---
 webapp/src/lib/components/FormHeader.svelte   |  7 ++++-
 webapp/src/routes/+page.svelte                | 29 +++++++++++--------
 .../src/routes/baskets/[prefix]/+page.svelte  |  2 +-
 .../src/routes/drawing/[prefix]/+page.svelte  |  2 +-
 .../src/routes/tickets/[prefix]/+page.svelte  |  2 +-
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/webapp/src/lib/components/FormHeader.svelte b/webapp/src/lib/components/FormHeader.svelte
index edde6e7..fbe39eb 100644
--- a/webapp/src/lib/components/FormHeader.svelte
+++ b/webapp/src/lib/components/FormHeader.svelte
@@ -28,7 +28,12 @@
             <input type="number" bind:value={pagerForm.id_from}>
             <div style="font-size: 22pt">-</div>
             <input type="number" bind:value={pagerForm.id_to}>
-            <button class="styled" onclick={functions.refreshPage}>Refresh</button>
+            <button class="styled" onclick={() => {
+                if (Math.abs(pagerForm.id_to - pagerForm.id_from) > 800) {
+                    pagerForm.id_to = pagerForm.id_from + 799;
+                }
+                setTimeout(functions.refreshPage, 50);
+            }}>Refresh</button>
         </div>
         <div class="flex-row">
             <button class="styled" title="Alt + B" tabindex="-1" onclick={functions.prevPage}>Prev Page</button>
diff --git a/webapp/src/routes/+page.svelte b/webapp/src/routes/+page.svelte
index 69f6df6..39c372a 100644
--- a/webapp/src/routes/+page.svelte
+++ b/webapp/src/routes/+page.svelte
@@ -40,14 +40,19 @@
     <a href="/counts" target="_blank" class="styled">Counts</a>
   </div>
   <div>
-    <h2>Select Prefix:</h2>
+    <h2>Current Prefix: {current_prefix.name}</h2>
   </div>
-  <div class="prefix-selector">
-    <select style="width: 100%; box-sizing: border-box;" bind:value={prefix_name}>
-      {#each all_prefixes as prefix}
-      <option value={prefix.name}>{prefix.name}</option>
-      {/each}
-    </select>
+  <div class="change_title">
+    <h2>Change Prefix:</h2>
+  </div>
+  <div class="prefix-selector flex-row">
+    {#each all_prefixes as prefix}
+    <div class={prefix.color}>
+      <button class="styled" onclick={() => {
+        prefix_name = prefix.name;
+      }}>{prefix.name}</button>
+    </div>
+    {/each}
   </div>
   <div><h2>Forms:</h2></div>
   <div class="flex-row {current_prefix.color}">
@@ -60,14 +65,14 @@
     <a href="/reports/byname/{current_prefix.name}/" target="_blank" class="styled">By Name</a>
     <a href="/reports/bybasket/{current_prefix.name}/" target="_blank" class="styled">By Basket ID</a>
   </div>
-  {#if admin_mode}
-  <div><h2>Admin Mode:</h2></div>
-  <div class="flex-row {current_prefix.color}">
+</div>
+{#if admin_mode}
+<div><h2>Admin Mode:</h2></div>
+  <div class="flex-row">
     <a href="/prefixes" target="_blank" class="styled">Prefix Editor</a>
     <a href="/backuprestore" target="_blank" class="styled">Backup/Restore</a>
-  </div>
-  {/if}
 </div>
+{/if}
 
 <div class="status tb-margin">
   {data.status}
diff --git a/webapp/src/routes/baskets/[prefix]/+page.svelte b/webapp/src/routes/baskets/[prefix]/+page.svelte
index f28a7d8..3007edd 100644
--- a/webapp/src/routes/baskets/[prefix]/+page.svelte
+++ b/webapp/src/routes/baskets/[prefix]/+page.svelte
@@ -14,7 +14,7 @@
         const focusDe = document.getElementById(`${idx}_de`);
         if (focusDe) {
             focusDe.select();
-            focusDe.scrollIntoView({block: "end"});
+            focusDe.scrollIntoView({block: "center"});
         }
     }
 
diff --git a/webapp/src/routes/drawing/[prefix]/+page.svelte b/webapp/src/routes/drawing/[prefix]/+page.svelte
index b29469f..45cf2a1 100644
--- a/webapp/src/routes/drawing/[prefix]/+page.svelte
+++ b/webapp/src/routes/drawing/[prefix]/+page.svelte
@@ -13,7 +13,7 @@
         const focusWt = document.getElementById(`${idx}_wt`);
         if (focusWt) {
             focusWt.select();
-            focusWt.scrollIntoView({block: "end"});
+            focusWt.scrollIntoView({block: "center"});
         }
     }
 
diff --git a/webapp/src/routes/tickets/[prefix]/+page.svelte b/webapp/src/routes/tickets/[prefix]/+page.svelte
index 676e386..9cde7ef 100644
--- a/webapp/src/routes/tickets/[prefix]/+page.svelte
+++ b/webapp/src/routes/tickets/[prefix]/+page.svelte
@@ -13,7 +13,7 @@
         const focusFn = document.getElementById(`${idx}_fn`);
         if (focusFn) {
             focusFn.select();
-            focusFn.scrollIntoView({block: "end"});
+            focusFn.scrollIntoView({block: "center"});
         }
     }