RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fix mobile layout: stack View button below dropdown on mobile devices

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-02 08:45:31 -04:00
parent 413df3dabc
commit dfe3517ac6
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/index.vue
View File

@@ -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>