From f72d479c1d1257bc9c47b47f8a09a0377b96f6c4 Mon Sep 17 00:00:00 2001
From: Zach Harding <zachary.b.harding@gmail.com>
Date: Tue, 17 Mar 2026 10:35:02 -0400
Subject: [PATCH] rearranged sort and filter on mobile into a flex col instead
 of row

---
 src/components/CardGrid.astro  |  2 +-
 src/pages/partials/cards.astro | 25 ++++++++++++-------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/CardGrid.astro b/src/components/CardGrid.astro
index 284842b..38d06a0 100644
--- a/src/components/CardGrid.astro
+++ b/src/components/CardGrid.astro
@@ -15,7 +15,7 @@ import BackToTop from "./BackToTop.astro"
         </div>
     </div>
     <div class="col-sm-12 col-md-10 mt-0">
-        <div class="d-flex flex-row align-items-center mb-2">
+        <div class="d-flex flex-column gap-1 flex-md-row align-items-center mb-2 w-100 justify-content-start">
             <div id="sortBy"></div>
             <div id="totalResults"></div>
             <div id="activeFilters"></div>
diff --git a/src/pages/partials/cards.astro b/src/pages/partials/cards.astro
index 2a6acac..665da0c 100644
--- a/src/pages/partials/cards.astro
+++ b/src/pages/partials/cards.astro
@@ -178,37 +178,36 @@ const facets = searchResults.results.slice(1).map((result: any) => {
             </div>
         ))}
     </div>
-    <div id="sortBy" class="mb-2 d-flex align-items-center justify-content-start small" hx-swap-oob="true">
+    <div id="sortBy" class="d-flex flex-fill align-items-center me-auto" hx-swap-oob="true">
         <div class="dropdown">
-            <button class="btn btn-sm btn-dark dropdown-toggle small" data-bs-toggle="dropdown" aria-expanded="false">Sort by</button>
+            <button class="btn btn-sm btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Sort by</button>
             <ul class="dropdown-menu dropdown-menu-dark">
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="releaseDate:desc,number:asc" data-label="Set: Newest to Oldest">Set: Newest to Oldest</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="releaseDate:asc,number:asc"  data-label="Set: Oldest to Newest">Set: Oldest to Newest</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="marketPrice:desc"            data-label="Price: High to Low">Price: High to Low</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="marketPrice:asc"             data-label="Price: Low to High">Price: Low to High</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="number:asc"                  data-label="Card Number: Ascending">Card Number: Ascending</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="number:desc"                 data-label="Card Number: Descending">Card Number: Descending</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="releaseDate:desc,number:asc" data-label="Set: Newest to Oldest">Set: Newest to Oldest</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="releaseDate:asc,number:asc"  data-label="Set: Oldest to Newest">Set: Oldest to Newest</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="marketPrice:desc"            data-label="Price: High to Low">Price: High to Low</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="marketPrice:asc"             data-label="Price: Low to High">Price: Low to High</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="number:asc"                  data-label="Card Number: Ascending">Card Number: Ascending</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="number:desc"                 data-label="Card Number: Descending">Card Number: Descending</a></li>
             </ul>
         </div>
-        <span id="sortLabel" class="ms-2 text-secondary">{sortKey ? ({"releaseDate:desc,number:asc":"Set: Newest to Oldest","releaseDate:asc,number:asc":"Set: Oldest to Newest","marketPrice:desc":"Price: High to Low","marketPrice:asc":"Price: Low to High","number:asc":"Card Number: Ascending","number:desc":"Card Number: Descending"}[sortKey] ?? '') : ''}</span>
+        <span id="sortLabel" class="ms-1 text-secondary small">{sortKey ? ({"releaseDate:desc,number:asc":"Set: Newest to Oldest","releaseDate:asc,number:asc":"Set: Oldest to Newest","marketPrice:desc":"Price: High to Low","marketPrice:asc":"Price: Low to High","number:asc":"Card Number: Ascending","number:desc":"Card Number: Descending"}[sortKey] ?? '') : ''}</span>
     </div>
-    <div id="totalResults" class="mb-2 ms-5 text-secondary small" hx-swap-oob="true">
+    <div id="totalResults" class="d-flex text-secondary small d-none align-items-center" hx-swap-oob="true">
         {totalHits} {totalHits === 1 ? ' result' : ' results'}
     </div>
-    <div id="activeFilters" class="mb-2 d-flex align-items-center small ms-auto" hx-swap-oob="true">
+    <div id="activeFilters" class="d-flex small ms-auto align-items-center" hx-swap-oob="true">
         {(Object.entries(filters).length > 0) && 
         <span class="me-1 small">Filtered by:</span>
         <ul class="list-group list-group-horizontal">
             {Object.entries(filters).map(([filter, values]) => (
                 values.map((value) => (
-                    <li data-facet={filter} data-value={value} class="list-group-item small remove-filter">{value}</li>
+                    <li data-facet={filter} data-value={value} class="list-group-item small p-2 remove-filter">{value}</li>
                 ))
             ))}
         </ul>
         <span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters" id="clear-all-filters"></button></span>
         }
     </div>
-
     <script define:vars={{ totalHits, filters, facets }} is:inline>
 
         // Filter the facet values to make things like Set easier to find