From a675bd1d9ef8894b9469cfc266e3fed9f99ffd26 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 22:30:30 -0600
Subject: [PATCH] fix nav and pagination

---
 web/app/adopt/page.js | 35 +++++++++++++++++++++++++++++++----
 web/app/globals.css   | 19 +++++++++++++------
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/web/app/adopt/page.js b/web/app/adopt/page.js
index 6c2b41aa..3a17654e 100644
--- a/web/app/adopt/page.js
+++ b/web/app/adopt/page.js
@@ -74,7 +74,7 @@ export default function AdoptPage() {
     [pets]
   );
   
-  const ITEMS_PER_PAGE = 20;
+  const ITEMS_PER_PAGE = 24;
   const [currentPage, setCurrentPage] = useState(0);
 
   const filteredPets = useMemo(
@@ -192,15 +192,42 @@ export default function AdoptPage() {
           <div className="pagination-controls">
             <button
               className="pagination-btn"
-              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+              onClick={() => { setCurrentPage((p) => Math.max(0, p - 1)); window.scrollTo(0, 0); }}
               disabled={currentPage === 0}
             >
               ← Prev
             </button>
-            <span className="pagination-info">Page {currentPage + 1} of {totalPages}</span>
+            {(() => {
+              const pages = [];
+              const delta = 2;
+              const left = Math.max(0, currentPage - delta);
+              const right = Math.min(totalPages - 1, currentPage + delta);
+              if (left > 0) {
+                pages.push(0);
+                if (left > 1) pages.push("...");
+              }
+              for (let i = left; i <= right; i++) pages.push(i);
+              if (right < totalPages - 1) {
+                if (right < totalPages - 2) pages.push("...");
+                pages.push(totalPages - 1);
+              }
+              return pages.map((p, i) =>
+                p === "..." ? (
+                  <span key={`ellipsis-${i}`} className="pagination-ellipsis">…</span>
+                ) : (
+                  <button
+                    key={p}
+                    className={`pagination-btn${p === currentPage ? " pagination-btn--active" : ""}`}
+                    onClick={() => { setCurrentPage(p); window.scrollTo(0, 0); }}
+                  >
+                    {p + 1}
+                  </button>
+                )
+              );
+            })()}
             <button
               className="pagination-btn"
-              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+              onClick={() => { setCurrentPage((p) => Math.min(totalPages - 1, p + 1)); window.scrollTo(0, 0); }}
               disabled={currentPage === totalPages - 1}
             >
               Next →
diff --git a/web/app/globals.css b/web/app/globals.css
index b33b8f62..f54ed79b 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -1031,8 +1031,7 @@ body {
   align-items: center;
   gap: 0.5rem;
   justify-self: end;
-  padding-left: 1.5rem;
-  flex-shrink: 0;
+  min-width: 0;
 }
 
 .nav-greeting {
@@ -2040,6 +2039,7 @@ body {
   margin-right: 0.5rem;
   outline: none;
   transition: background 0.2s ease;
+  max-width: 160px;
 }
 
 .nav-store-select option {
@@ -2849,7 +2849,10 @@ body {
 
   .nav-auth {
     gap: 0.35rem;
-    padding-left: 0.5rem;
+  }
+
+  .nav-greeting {
+    display: none;
   }
 }
 
@@ -3126,9 +3129,13 @@ img, video, iframe {
 .contact-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .contact-error { color: #c0392b; font-size: 0.9rem; }
 .contact-success { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.75rem 1rem; }
-.pagination-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 1rem; }
-.pagination-btn { background: #333; color: white; border: none; border-radius: 8px; padding: 0.5rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
-.pagination-btn:disabled { background: #ccc; cursor: not-allowed; }
+.pagination-controls { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 1.5rem 1rem; flex-wrap: wrap; }
+.pagination-btn { background: #e8e8e8; color: #333; border: none; border-radius: 8px; padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
+.pagination-btn:hover:not(:disabled) { background: #d0d0d0; }
+.pagination-btn:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
+.pagination-btn--active { background: #e68672; color: white; }
+.pagination-btn--active:hover { background: #d4705e; }
+.pagination-ellipsis { padding: 0.5rem 0.25rem; color: #888; font-weight: 600; }
 .pagination-info { font-size: 0.9rem; color: #555; font-weight: 500; }
 
 @media (max-width: 768px) {