refactor: update layout of Proxmox boot order view to use grid system for improved responsiveness and button alignment

This commit is contained in:
2025-12-04 12:24:44 -05:00
parent 2ab2ed8e1b
commit 22f3181d04

View File

@@ -303,8 +303,8 @@
</div>
</div>
<div class="flex flex-col lg:flex-row gap-3 min-w-0">
<div class="flex-1 min-w-0 relative">
<div class="grid grid-cols-1 lg:grid-cols-[2fr_auto] gap-3 items-start">
<div class="relative min-w-0">
<select id="iso-selection-{{ $drive }}"
wire:model.live="selectedIsos.{{ $drive }}"
class="w-full bg-background border border-neutral rounded-md px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
@@ -370,10 +370,10 @@
</div>
</div>
</div>
<div class="flex gap-2 w-full lg:w-auto">
<div class="flex gap-2 w-full lg:w-auto lg:min-w-[260px]">
<x-button.primary wire:click="applyIso('{{ $drive }}')"
wire:loading.attr="disabled"
class="flex-1 lg:flex-none lg:min-w-[120px]"
class="flex-1"
:disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')">
<x-loading target="applyIso('{{ $drive }}')" />
<span wire:loading.remove wire:target="applyIso('{{ $drive }}')">Apply</span>
@@ -381,7 +381,7 @@
</x-button.primary>
<x-button.danger wire:click="ejectIso('{{ $drive }}')"
wire:loading.attr="disabled"
class="flex-1 lg:flex-none lg:min-w-[120px]"
class="flex-1"
:disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'">
<x-loading target="ejectIso('{{ $drive }}')" />
<span wire:loading.remove wire:target="ejectIso('{{ $drive }}')">Eject</span>