style: make footer more compact on mobile

Author: danielroe

app/components/AppFooter.vue

@@ -92,9 +92,11 @@ onUnmounted(() => {
             : 'mt-auto',
     ]"
   >
-    <div class="container py-6 flex flex-col gap-3 text-fg-subtle text-sm">
-      <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
-        <p class="font-mono m-0">a better browser for the npm registry</p>
+    <div class="container py-2 sm:py-6 flex flex-col gap-1 sm:gap-3 text-fg-subtle text-sm">
+      <div class="flex flex-row items-center justify-between gap-2 sm:gap-4">
+        <p class="font-mono m-0 hidden sm:block">a better browser for the npm registry</p>
+        <!-- On mobile, show disclaimer here instead of tagline -->
+        <p class="text-xs text-fg-muted m-0 sm:hidden">not affiliated with npm, Inc.</p>
         <div class="flex items-center gap-4 sm:gap-6">
           <a
             href="https://github.com/npmx-dev/npmx.dev"
@@ -113,7 +115,7 @@ onUnmounted(() => {
           </a>
         </div>
       </div>
-      <p class="text-xs text-fg-muted text-center sm:text-left m-0">
+      <p class="text-xs text-fg-muted text-center sm:text-left m-0 hidden sm:block">
         npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.
       </p>
     </div>