From 311ebdf4a2dec9835ed720ec575658b918f389f5 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 20 Dec 2025 17:17:00 -0500
Subject: [PATCH] feat: enhance server display layout and improve mobile tag
 visibility

---
 .../Servers/Proxmox/views/server.blade.php    | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/server.blade.php b/extensions/Servers/Proxmox/views/server.blade.php
index 41362d477..c766394f0 100644
--- a/extensions/Servers/Proxmox/views/server.blade.php
+++ b/extensions/Servers/Proxmox/views/server.blade.php
@@ -2,8 +2,8 @@
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
         <div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
 
-            <div class="flex items-center justify-between mb-2">
-                <div class="flex items-center gap-3">
+            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
+                <div class="flex items-center gap-3 min-w-0 flex-shrink">
                     @if($server->user_set_icon)
                         @php
                             $iconColor = $server->user_set_icon_color ?? '#6366f1';
@@ -14,39 +14,17 @@
                             $iconName = $server->user_set_icon;
                             $componentName = $iconPrefix . '-' . $iconName;
                         @endphp
-                        <div class="p-2 rounded-lg" style="background-color: {{ $bgColor }};">
+                        <div class="p-2 rounded-lg flex-shrink-0" style="background-color: {{ $bgColor }};">
                             <x-dynamic-component :component="$componentName" class="size-5" style="color: {{ $iconColor }};" />
                         </div>
                     @else
-                        <div class="bg-secondary/10 p-2 rounded-lg">
+                        <div class="bg-secondary/10 p-2 rounded-lg flex-shrink-0">
                             <x-ri-server-line class="size-5 text-secondary" />
                         </div>
                     @endif
-                    <span class="font-medium">{{ $status->name }}</span>
-                    
-                    {{-- Server Tags --}}
-                    <div class="flex items-center gap-1.5 ml-2">
-                        @if($server->tag1)
-                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
-                                  style="background-color: {{ $server->tag1color ?? '#3498db' }};">
-                                {{ $server->tag1 }}
-                            </span>
-                        @endif
-                        @if($server->tag2)
-                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
-                                  style="background-color: {{ $server->tag2color ?? '#2ecc71' }};">
-                                {{ $server->tag2 }}
-                            </span>
-                        @endif
-                        @if($server->tag3)
-                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
-                                  style="background-color: {{ $server->tag3color ?? '#e74c3c' }};">
-                                {{ $server->tag3 }}
-                            </span>
-                        @endif
-                    </div>
+                    <span class="font-medium truncate">{{ $status->name }}</span>
                 </div>
-                <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg
+                <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg flex-shrink-0
                     @if($status->status == 'running') text-success bg-success/20
                     @elseif($status->status == 'stopped') text-inactive bg-inactive/20
                     @else text-warning bg-warning/20 @endif">
@@ -71,6 +49,30 @@
                 </div>
             </div>
 
+            {{-- Server Tags - Separate row for better mobile layout --}}
+            @if($server->tag1 || $server->tag2 || $server->tag3)
+                <div class="flex flex-wrap items-center gap-1.5 mb-3">
+                    @if($server->tag1)
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
+                              style="background-color: {{ $server->tag1color ?? '#3498db' }};">
+                            {{ $server->tag1 }}
+                        </span>
+                    @endif
+                    @if($server->tag2)
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
+                              style="background-color: {{ $server->tag2color ?? '#2ecc71' }};">
+                            {{ $server->tag2 }}
+                        </span>
+                    @endif
+                    @if($server->tag3)
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white"
+                              style="background-color: {{ $server->tag3color ?? '#e74c3c' }};">
+                            {{ $server->tag3 }}
+                        </span>
+                    @endif
+                </div>
+            @endif
+
             <div class="flex flex-row flex-wrap gap-4 mt-4">
                 <div class="flex flex-col">
                     <span class="text-xs text-base/50">IPv4 Address</span>