From 18f0b3ca50bcf7da045d4757ab7eaa033d785255 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Wed, 1 Oct 2025 23:35:32 -0400
Subject: [PATCH] Improve mobile layouts: fix button wrapping, reorganize admin
 header, stack form fields properly

---
 pages/admin.vue | 90 +++++++++++++++++++++++++------------------------
 pages/index.vue |  2 +-
 2 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/pages/admin.vue b/pages/admin.vue
index 835b1e4..91dfde1 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -2,11 +2,8 @@
   <div class="min-h-screen bg-gray-50">
     <header class="bg-white shadow-sm">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center space-x-4">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
-            <h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
-          </div>
+        <div class="flex items-center justify-between mb-4">
+          <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
           <button
             @click="handleLogout"
             class="text-sm font-medium text-red-600 hover:text-red-700"
@@ -14,6 +11,7 @@
             Logout
           </button>
         </div>
+        <h1 class="text-2xl font-bold text-gray-900">Manage Sermons</h1>
       </div>
     </header>
 
@@ -23,8 +21,8 @@
         <h2 class="text-2xl font-bold text-gray-900 mb-6">Select Sermon to Manage</h2>
         
         <div v-if="allSermons && allSermons.length > 0" class="space-y-4">
-          <div class="flex gap-4 items-end">
-            <div class="flex-1">
+          <div class="space-y-4">
+            <div>
               <label for="sermon-select" class="block text-sm font-medium text-gray-700 mb-2">
                 Choose a Sermon
               </label>
@@ -39,22 +37,24 @@
                 </option>
               </select>
             </div>
-            <button
-              type="button"
-              @click="handleEdit"
-              :disabled="!selectedSermonId"
-              class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
-            >
-              Edit
-            </button>
-            <button
-              type="button"
-              @click="handleDelete"
-              :disabled="!selectedSermonId || deleting"
-              class="px-6 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
-            >
-              {{ deleting ? 'Deleting...' : 'Delete' }}
-            </button>
+            <div class="flex gap-4">
+              <button
+                type="button"
+                @click="handleEdit"
+                :disabled="!selectedSermonId"
+                class="flex-1 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              >
+                Edit
+              </button>
+              <button
+                type="button"
+                @click="handleDelete"
+                :disabled="!selectedSermonId || deleting"
+                class="flex-1 px-6 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              >
+                {{ deleting ? 'Deleting...' : 'Delete' }}
+              </button>
+            </div>
           </div>
           
           <div v-if="deleteError" class="text-red-600 text-sm">
@@ -120,8 +120,8 @@
           <h2 class="text-xl font-semibold text-gray-900 mb-4">Section 1: Bible References</h2>
           <div class="space-y-6">
             <div v-for="(ref, index) in bibleReferences" :key="index" class="border border-gray-200 rounded-lg p-4 space-y-3">
-              <div class="flex gap-3">
-                <div class="w-64">
+              <div class="flex flex-col md:flex-row gap-3">
+                <div class="w-full md:w-64">
                   <label :for="`version-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
                     Bible Version
                   </label>
@@ -139,26 +139,28 @@
                     <option value="CSB">Christian Standard Bible (CSB)</option>
                   </select>
                 </div>
-                <div class="flex-1">
-                  <label :for="`reference-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
-                    Book & Verses
-                  </label>
-                  <input
-                    :id="`reference-${index}`"
-                    v-model="ref.reference"
-                    type="text"
-                    placeholder="e.g., John 3:16 or Romans 8:28-30"
-                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                  />
+                <div class="flex-1 flex gap-3">
+                  <div class="flex-1">
+                    <label :for="`reference-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
+                      Book & Verses
+                    </label>
+                    <input
+                      :id="`reference-${index}`"
+                      v-model="ref.reference"
+                      type="text"
+                      placeholder="e.g., John 3:16 or Romans 8:28-30"
+                      class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                    />
+                  </div>
+                  <button
+                    v-if="bibleReferences.length > 1"
+                    type="button"
+                    @click="removeReference(index)"
+                    class="self-end px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200 md:block"
+                  >
+                    −
+                  </button>
                 </div>
-                <button
-                  v-if="bibleReferences.length > 1"
-                  type="button"
-                  @click="removeReference(index)"
-                  class="self-end px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200"
-                >
-                  −
-                </button>
               </div>
               <div>
                 <label :for="`text-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
diff --git a/pages/index.vue b/pages/index.vue
index 9dc8ada..ba15575 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,7 +12,7 @@
               <template v-if="isAuthenticated">
                 <NuxtLink 
                   to="/admin" 
-                  class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm"
+                  class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm whitespace-nowrap"
                 >
                   Manage Sermons
                 </NuxtLink>