From b776969a57862c56640d24e533d884d391e353fc Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 1 Dec 2025 12:27:00 -0500
Subject: [PATCH] refactor: consolidate and enhance toggle switch styling in
 Proxmox layout for improved user experience and maintainability

---
 .../Proxmox/views/components/layout.blade.php | 108 +++++++++---------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index e5374deb6..835c05dee 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -170,6 +170,59 @@
             @endphp
 
             <div class="mb-10 mt-3">
+                <style>
+                    .view-toggle-switch {
+                        position: relative;
+                        display: inline-block;
+                        width: 36px;
+                        height: 20px;
+                        margin: 0 12px;
+                    }
+                    .view-toggle-switch input {
+                        opacity: 0;
+                        width: 0;
+                        height: 0;
+                    }
+                    .view-toggle-slider {
+                        position: absolute;
+                        cursor: pointer;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        background-color: #e5e7eb;
+                        transition: 0.3s;
+                        border-radius: 20px;
+                    }
+                    .view-toggle-slider:before {
+                        position: absolute;
+                        content: "";
+                        height: 16px;
+                        width: 16px;
+                        left: 2px;
+                        bottom: 2px;
+                        background-color: white;
+                        transition: 0.3s;
+                        border-radius: 50%;
+                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+                    }
+                    .view-toggle-switch input:checked + .view-toggle-slider {
+                        background-color: #2563eb;
+                    }
+                    .view-toggle-switch input:checked + .view-toggle-slider:before {
+                        transform: translateX(16px);
+                    }
+                    .view-toggle-switch input:disabled + .view-toggle-slider {
+                        opacity: 0.5;
+                        cursor: not-allowed;
+                    }
+                    .dark .view-toggle-slider {
+                        background-color: #374151;
+                    }
+                    .dark .view-toggle-switch input:checked + .view-toggle-slider {
+                        background-color: #2563eb;
+                    }
+                </style>
                 <div class="hidden lg:flex flex-row gap-2 items-center">
                     @foreach($tabs as $tab)
                         @php
@@ -191,60 +244,7 @@
                             @endif
                         </div>
                     @endforeach
-                    <div class="ml-auto">
-                        <style>
-                            .view-toggle-switch {
-                                position: relative;
-                                display: inline-block;
-                                width: 36px;
-                                height: 20px;
-                                margin: 0 12px;
-                            }
-                            .view-toggle-switch input {
-                                opacity: 0;
-                                width: 0;
-                                height: 0;
-                            }
-                            .view-toggle-slider {
-                                position: absolute;
-                                cursor: pointer;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                background-color: #e5e7eb;
-                                transition: 0.3s;
-                                border-radius: 20px;
-                            }
-                            .view-toggle-slider:before {
-                                position: absolute;
-                                content: "";
-                                height: 16px;
-                                width: 16px;
-                                left: 2px;
-                                bottom: 2px;
-                                background-color: white;
-                                transition: 0.3s;
-                                border-radius: 50%;
-                                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                            }
-                            .view-toggle-switch input:checked + .view-toggle-slider {
-                                background-color: #2563eb;
-                            }
-                            .view-toggle-switch input:checked + .view-toggle-slider:before {
-                                transform: translateX(16px);
-                            }
-                            .view-toggle-switch input:disabled + .view-toggle-slider {
-                                opacity: 0.5;
-                                cursor: not-allowed;
-                            }
-                            .dark .view-toggle-slider {
-                                background-color: #374151;
-                            }
-                            .dark .view-toggle-switch input:checked + .view-toggle-slider {
-                                background-color: #2563eb;
-                            }
-                        </style>
+                    <div class="ml-auto flex items-center" style="height: 2.5rem; align-items: center;">
                         <label class="inline-flex items-center" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : 'cursor-pointer'">
                             <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Standard</span>
                             <label class="view-toggle-switch">