From dfe3517ac67f343a83ebcef287ed10af1f95cabb Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Thu, 2 Oct 2025 08:45:31 -0400
Subject: [PATCH] Fix mobile layout: stack View button below dropdown on mobile
 devices

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

diff --git a/pages/index.vue b/pages/index.vue
index 22e9243..e7245a9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -79,7 +79,7 @@
       <div v-if="previousSermons.length > 0" class="max-w-2xl mx-auto">
         <h2 class="text-2xl font-semibold text-gray-900 mb-4 text-center">Previous Sermons</h2>
         <p class="text-center text-gray-700 mb-4">Use the dropdown below to view a previous sermon</p>
-        <div class="flex gap-3">
+        <div class="flex flex-col sm:flex-row gap-3">
           <select
             v-model="selectedSermonSlug"
             class="flex-1 px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base"
@@ -92,7 +92,7 @@
           <button
             @click="navigateToSermon"
             :disabled="!selectedSermonSlug"
-            class="px-6 py-3 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 whitespace-nowrap"
+            class="px-6 py-3 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 sm:whitespace-nowrap"
           >
             View
           </button>