From 815076af1b983517096044d874551bb56981ded4 Mon Sep 17 00:00:00 2001
From: NickJ-7010 <nickj7010@gmail.com>
Date: Wed, 21 Oct 2026 15:26:52 -0400
Subject: [PATCH 1/2] fix: Make counters on the index page a grid O_o and fix
 alignment for long events

---
 templates/counter.tmpl |  2 +-
 templates/index.tmpl   | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/counter.tmpl b/templates/counter.tmpl
index 94e57a5..71e1d6f 100644
--- a/templates/counter.tmpl
+++ b/templates/counter.tmpl
@@ -13,7 +13,7 @@
                   <span class="description"><i>reported by: <span class="reset-user"></span></i></span>
                 </div>
               </div>
-              <div class="col">
+              <div class="col align-content-center">
                 <div class="text-center my-auto">
                   <span class="days-since fw-bold display-3"></span>
                   <span class="description d-block">Day(s) Ago</span>
diff --git a/templates/index.tmpl b/templates/index.tmpl
index 2cb7c3d..db164a1 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -1,8 +1,8 @@
 {{ define "index.tmpl"}}
 {{ template "header.tmpl" . }}
     <template id="counter-card-template">
-        <li class="p-1">
-            <a class="text-center list-group-item list-group-item-action p-3" href="#">
+        <li class="col p-1">
+            <a class="h-100 align-content-center text-center list-group-item list-group-item-action p-3" href="#">
                 <span class="fs-5 counter-title"></span>
                 <br/>
                 <span class="days-since fw-bold display-1 timestamp"> </span>
@@ -19,8 +19,8 @@
         <br/>
         <input class="form-control w-75 mx-auto" type="text" placeholder= "Find Counters">
         <br/>
-        <div>
-            <ul id="counter-list" class="counter-list list-group list-unstyled text-wrap text-break"></ul>
+        <div class="container">
+            <ul id="counter-list" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-0 counter-list list-group list-unstyled flex-row"></ul>
         </div>
         <div id="scroll-sentinel" style="height:1px"></div> {{/* hi storemcloud! */}}
         <script>
@@ -119,4 +119,4 @@
     </div>
 </body>
 </html>
-{{end}}
\ No newline at end of file
+{{end}}

From 19a6b73758d8b40aaf2eb87b7a0a28a551d4fdde Mon Sep 17 00:00:00 2001
From: NickJ-7010 <nickj7010@gmail.com>
Date: Wed, 21 Oct 2026 16:24:54 -0400
Subject: [PATCH 2/2] fix: Observer fix by @weather

---
 templates/index.tmpl | 35 +++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/templates/index.tmpl b/templates/index.tmpl
index db164a1..04527ab 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -41,20 +41,13 @@
                 };
             }
 
+            const sentinel = document.getElementById("scroll-sentinel");
             const template = document.getElementById("counter-card-template");
             const list = document.getElementById("counter-list");
             let loading = false;
             let done = false;
             let timestamp = null
 
-            function clearCounters() {
-                list.replaceChildren();   
-                timestamp = null;         
-                done = false;
-                loading = false;
-                observer.observe(document.getElementById("scroll-sentinel")); 
-                loadMore();
-            }
 
             function renderCounter(c) {
                 const li = template.content.firstElementChild.cloneNode(true);
@@ -97,9 +90,27 @@
                     console.error("Error loading more:", err);
                 } finally {
                     loading = false;
+                    if (!done) {
+                        observer.unobserve(sentinel);
+                        observer.observe(sentinel);
+                    }
                 }
             }
 
+            const observer = new IntersectionObserver(entries => {
+                if (entries[0].isIntersecting) loadMore();
+            }, { rootMargin: "300px" });
+            observer.observe(sentinel);
+
+            function clearCounters() {
+                list.replaceChildren();
+                timestamp = null;
+                done = false;
+                loading = false;
+                observer.observe(sentinel);
+                loadMore();
+            }
+
             const debouncedSearch = debounce(clearCounters, 500);
 
             document.querySelector('input').addEventListener('input', function() {
@@ -109,12 +120,8 @@
                 debouncedSearch()
             });
 
-            const observer = new IntersectionObserver(entries => {
-                if (entries[0].isIntersecting) loadMore();
-            }, { rootMargin: "300px" });
-            observer.observe(document.getElementById("scroll-sentinel"));
-
-            })()
+            loadMore()
+        })()
         </script>
     </div>
 </body>