fix(ui): fix app footer layout and build environment on narrow screens

Author: userquin

app/components/AppFooter.vue

@@ -11,7 +11,6 @@ const isHome = computed(() => route.name === 'index')
       >
         <div>
           <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
-          <BuildEnvironment v-if="!isHome" footer />
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6">
@@ -56,6 +55,7 @@ const isHome = computed(() => route.name === 'index')
           </a>
         </div>
       </div>
+      <BuildEnvironment v-if="!isHome" footer />
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
         <span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>

app/components/BuildEnvironment.vue

@@ -10,7 +10,7 @@ const buildInfo = useAppConfig().buildInfo
 <template>
   <div
     class="font-mono text-xs text-fg-muted flex items-center gap-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
-    :class="footer ? 'mt-4 justify-start' : 'mb-8 justify-center'"
+    :class="footer ? 'my-1 justify-center sm:justify-start' : 'mb-8 justify-center'"
     style="animation-delay: 0.05s"
   >
     <i18n-t keypath="built_at" scope="global">