Fix mobile layout: Edit and Archive on first row, Delete on second row

This commit is contained in:
2025-10-01 23:56:39 -04:00
parent fd1f3c14bb
commit 591405c66f

View File

@@ -39,28 +39,30 @@
</option>
</select>
</div>
<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="handleArchive"
:disabled="!selectedSermonId || archiving"
class="flex-1 px-6 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
>
{{ archiving ? 'Archiving...' : 'Archive' }}
</button>
<div class="space-y-3">
<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="handleArchive"
:disabled="!selectedSermonId || archiving"
class="flex-1 px-6 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
>
{{ archiving ? 'Archiving...' : 'Archive' }}
</button>
</div>
<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"
class="w-full 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>