From 2ab2ed8e1b490d7d14728a4d95d64b89a5571b4f Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 12:22:21 -0500
Subject: [PATCH] feat: update Proxmox boot order view with improved button
 styling and layout adjustments for better usability and visual consistency

---
 .../Proxmox/views/boot-order.blade.php        | 32 ++++++++++---------
 .../Proxmox/views/components/layout.blade.php | 12 +++++--
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/boot-order.blade.php b/extensions/Servers/Proxmox/views/boot-order.blade.php
index a1c91a45a..4f4b4fef6 100644
--- a/extensions/Servers/Proxmox/views/boot-order.blade.php
+++ b/extensions/Servers/Proxmox/views/boot-order.blade.php
@@ -212,20 +212,22 @@
                     </span>
                 </div>
 
-                <x-button.secondary wire:click="createCdDrive" wire:loading.attr="disabled" 
-                                    class="w-full lg:w-48"
-                                    :disabled="count($cdDrives) >= 2">
-                    <x-loading target="createCdDrive" />
-                    Create CD/DVD-ROM Drive
-                </x-button.secondary>
+                <div class="flex justify-center">
+                    <x-button.primary wire:click="createCdDrive" wire:loading.attr="disabled" 
+                                      class="w-full sm:w-auto"
+                                      :disabled="count($cdDrives) >= 2">
+                        <x-loading target="createCdDrive" />
+                        Create CD/DVD-ROM Drive
+                    </x-button.primary>
+                </div>
             </div>
         @endif
 
         @foreach($cdDrives as $index => $drive)
-            <div class="bg-background-secondary border border-neutral rounded-lg p-4 space-y-4" wire:key="cd-drive-{{ $drive }}">
+            <div class="bg-background-secondary border border-neutral rounded-lg p-3 lg:p-4 space-y-3 lg:space-y-4" wire:key="cd-drive-{{ $drive }}">
                 <div class="flex flex-wrap items-center justify-between gap-2 min-w-0">
-                    <div class="flex-1">
-                        <div class="flex items-center gap-2 min-w-0 flex-1">
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-2 min-w-0">
                             <h3 class="text-base sm:text-lg font-semibold break-words">Mount ISO Image - {{ strtoupper($drive) }}</h3>
                             <div class="relative" x-data="{ open: false }" x-cloak>
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
@@ -301,11 +303,11 @@
                     </div>
                 </div>
 
-                <div class="flex flex-col gap-2 sm:flex-row sm:items-center min-w-0">
-                    <div class="flex-1 min-w-0 relative w-full sm:w-auto">
+                <div class="flex flex-col lg:flex-row gap-3 min-w-0">
+                    <div class="flex-1 min-w-0 relative">
                         <select id="iso-selection-{{ $drive }}" 
                                 wire:model.live="selectedIsos.{{ $drive }}"
-                                class="w-full bg-background border border-neutral rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
+                                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">
                             @foreach($isoOptions as $option)
                                 <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                             @endforeach
@@ -368,10 +370,10 @@
                             </div>
                         </div>
                     </div>
-                    <div class="flex w-full sm:w-auto gap-2 min-w-0">
+                    <div class="flex gap-2 w-full lg:w-auto">
                         <x-button.primary wire:click="applyIso('{{ $drive }}')" 
                                           wire:loading.attr="disabled"
-                                          class="flex-1 sm:flex-none"
+                                          class="flex-1 lg:flex-none lg:min-w-[120px]"
                                           :disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')">
                             <x-loading target="applyIso('{{ $drive }}')" />
                             <span wire:loading.remove wire:target="applyIso('{{ $drive }}')">Apply</span>
@@ -379,7 +381,7 @@
                         </x-button.primary>
                         <x-button.danger wire:click="ejectIso('{{ $drive }}')" 
                                          wire:loading.attr="disabled"
-                                         class="flex-1 sm:flex-none"
+                                         class="flex-1 lg:flex-none lg:min-w-[120px]"
                                          :disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'">
                             <x-loading target="ejectIso('{{ $drive }}')" />
                             <span wire:loading.remove wire:target="ejectIso('{{ $drive }}')">Eject</span>
diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 18a770f82..e9fa052d2 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -152,7 +152,15 @@
                 $tabs = [
                     ['label' => 'Overview', 'view' => 'overview', 'route' => route('proxmox.server.overview', ['server' => $server->id])],
                     ['label' => 'Statistics', 'view' => 'statistics', 'route' => route('proxmox.server.statistics', ['server' => $server->id]), 'advanced' => true],
-                    ['label' => 'Boot Settings', 'view' => 'boot-order', 'route' => route('proxmox.server.boot-order', ['server' => $server->id]), 'advanced' => true],
+                    [
+                        'label' => 'Hardware', 
+                        'dropdown' => true,
+                        'items' => [
+                            ['label' => 'Boot Settings', 'view' => 'boot-order', 'route' => route('proxmox.server.boot-order', ['server' => $server->id]), 'advanced' => true],
+                            ['label' => 'Display', 'view' => 'display', 'route' => route('proxmox.server.display', ['server' => $server->id]), 'advanced' => true],
+                            ['label' => 'System', 'view' => 'system', 'route' => route('proxmox.server.system', ['server' => $server->id]), 'advanced' => true],
+                        ]
+                    ],
                     [
                         'label' => 'Networking', 
                         'dropdown' => true,
@@ -163,8 +171,6 @@
                         ]
                     ],
                     ['label' => 'Cloud-init', 'view' => 'cloud-init', 'route' => route('proxmox.server.cloud-init', ['server' => $server->id]), 'advanced' => true],
-                    ['label' => 'Display', 'view' => 'display', 'route' => route('proxmox.server.display', ['server' => $server->id]), 'advanced' => true],
-                    ['label' => 'System', 'view' => 'system', 'route' => route('proxmox.server.system', ['server' => $server->id]), 'advanced' => true],
                 ];
                 if($server->service->product->settings()->where('key', 'backups')->first()?->value > 0) {
                     $tabs[] = ['label' => 'Backups', 'view' => 'backups', 'route' => route('proxmox.server.backups', ['server' => $server->id])];