From ab952e0334ce46e0e17511da8639719fe90ca2ee Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Mon, 6 Oct 2025 17:32:01 -0400
Subject: [PATCH] Mobile layout adjustments

---
 pages/index.vue | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index ebba001..5eeed9f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,29 +5,13 @@
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <!-- Mobile Layout -->
         <div class="md:hidden">
-          <div class="flex items-center justify-center mb-4">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
-          </div>
-          <div class="flex flex-wrap items-center justify-center gap-2">
+          <div class="flex items-center justify-between mb-3">
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-12 w-auto" />
             <ClientOnly fallback-tag="div">
               <template v-if="isAuthenticated">
-                <NuxtLink 
-                  v-if="isAdmin"
-                  to="/admin" 
-                  class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-xs whitespace-nowrap"
-                >
-                  Manage Sermons
-                </NuxtLink>
-                <NuxtLink 
-                  v-if="isAdmin"
-                  to="/users" 
-                  class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium text-xs whitespace-nowrap"
-                >
-                  Manage Users
-                </NuxtLink>
                 <button
                   @click="handleLogout"
-                  class="px-3 py-2 text-xs font-medium text-blue-600 hover:text-blue-700"
+                  class="text-sm font-medium text-blue-600 hover:text-blue-700"
                 >
                   Log Out
                 </button>
@@ -35,12 +19,28 @@
               <NuxtLink 
                 v-else
                 to="/login" 
-                class="px-3 py-2 text-xs font-medium text-blue-600 hover:text-blue-700"
+                class="text-sm font-medium text-blue-600 hover:text-blue-700"
               >
                 Log In
               </NuxtLink>
             </ClientOnly>
           </div>
+          <ClientOnly fallback-tag="div">
+            <div v-if="isAuthenticated && isAdmin" class="flex flex-wrap items-center justify-center gap-2">
+              <NuxtLink 
+                to="/admin" 
+                class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-xs whitespace-nowrap"
+              >
+                Manage Sermons
+              </NuxtLink>
+              <NuxtLink 
+                to="/users" 
+                class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium text-xs whitespace-nowrap"
+              >
+                Manage Users
+              </NuxtLink>
+            </div>
+          </ClientOnly>
         </div>
 
         <!-- Desktop Layout -->