added auth and made some sizeable updates to mobile layout

src/components/ClerkAuth.astro

@@ -0,0 +1,14 @@
+---
+import { SignedIn, SignedOut, UserButton, SignInButton, SignUpButton } from "@clerk/astro/components";
+---
+<div class="row">
+    <SignedOut>
+        <div class="col-3">
+            <SignInButton mode="modal" />
+            <SignUpButton mode="modal" />
+        </div>
+    </SignedOut>
+    <SignedIn>
+        <UserButton />
+    </SignedIn>
+</div>

src/components/PokedexHeader.astro

@@ -3,23 +3,22 @@ import '/src/assets/css/main.scss';
 import StickyFilter from './StickyFilter.astro';
 ---
 
-<header class="header-top position-fixed w-100 top-0 d-none d-md-inline-block">
+<header class="header-top position-fixed w-100">
     <div class="header-wrap">
         <div class="header-content">
-            <div class="header-logo">
+            <div class="header-logo d-none d-md-block">
                 <h1><div class="blueCircle m-2 ms-3"></div></a></h1> <!-- (z:2) --></h1>
             </div>
         </div>
-        <div class="header-logo-patch"></div>
+        <div class="header-logo-patch d-none d-md-block"></div>
         <nav class="nav-main horizontal-nav">
         </nav>
         <div class="header-social pt-3">
-            <div class="redCircle"></div>
-            <div class="yellowCircle"></div>
-            <div class="greenCircle"></div>
-
+            <StickyFilter />
+            <div class="redCircle d-none d-md-block"></div>
+            <div class="yellowCircle d-none d-md-block"></div>
+            <div class="greenCircle d-none d-md-block"></div>
             <nav class="nav-social horizontal-nav">
-                <StickyFilter />
             </nav> <!-- end .nav-social -->
         </div> <!-- end .header-social -->
     </div>

src/components/StickyFilter.astro

@@ -23,15 +23,15 @@
     };
 </script>
 
-<div class="sticky w-100">
-    <div class="container">
+<div class="search-bar w-100 me-md-3">
+    <div class="container mt-3 mt-md-0">
         <form id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
-            <div class="d-flex justify-content-between">
-                <div class="flex-grow-1 me-2">
+            <div class="bottom-0 row row-cols-2 g-0 me-md-2">
+                <div class="col-10">
                     <input type="hidden" name="start" id="start" value="0" />
                     <input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." />
                 </div>
-                <div class="">
+                <div class="col-2 p-0">
                     <input type="submit" class="w-100 btn btn-secondary search-button" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
                 </div>
             </div>