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> </option>
</select> </select>
</div> </div>
<div class="flex gap-4"> <div class="space-y-3">
<button <div class="flex gap-4">
type="button" <button
@click="handleEdit" type="button"
:disabled="!selectedSermonId" @click="handleEdit"
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" :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> Edit
<button </button>
type="button" <button
@click="handleArchive" type="button"
:disabled="!selectedSermonId || archiving" @click="handleArchive"
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" :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> {{ archiving ? 'Archiving...' : 'Archive' }}
</button>
</div>
<button <button
type="button" type="button"
@click="handleDelete" @click="handleDelete"
:disabled="!selectedSermonId || deleting" :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' }} {{ deleting ? 'Deleting...' : 'Delete' }}
</button> </button>