From fbd9c7e257419dcc924579a03465e4d5b2a4bf96 Mon Sep 17 00:00:00 2001
From: boban <boban@git.bave.dev>
Date: Thu, 25 Jun 2026 01:55:49 +0200
Subject: [PATCH] fix(metrics): move the history chart x-axis labels below the
 plot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The y-axis labels spanned the whole wrapper (inset-y-0), which now included the
x-axis label row — so the "0" tick and the "−1 h"/"jetzt" labels overlapped at the
bottom. Wrap only the plot + y-axis in the relative box and render the x-axis labels
as a separate row beneath it, so "0" sits on the chart's bottom edge and the time
labels are clearly below.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 resources/views/livewire/servers/show.blade.php | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/resources/views/livewire/servers/show.blade.php b/resources/views/livewire/servers/show.blade.php
index c224484..d334050 100644
--- a/resources/views/livewire/servers/show.blade.php
+++ b/resources/views/livewire/servers/show.blade.php
@@ -186,7 +186,8 @@
             <p x-show="!hasData && loading" class="py-10 text-center font-mono text-[11px] text-ink-4">{{ __('servers.history_subtitle') }} …</p>
 
             {{-- chart --}}
-            <div x-show="hasData" x-cloak class="relative pl-7">
+            <div x-show="hasData" x-cloak>
+                <div class="relative pl-7">
                 <div class="pointer-events-none absolute inset-y-0 left-0 w-6 font-mono text-[9px] text-ink-4">
                     <span class="absolute right-0 top-0 -translate-y-1/2">100</span>
                     <span class="absolute right-0 top-1/4 -translate-y-1/2">75</span>
@@ -239,8 +240,9 @@
                         </g>
                     </svg>
                 </div>
+                </div>{{-- /relative chart box --}}
 
-                <div class="mt-2 flex justify-between font-mono text-[9px] text-ink-4">
+                <div class="mt-3 flex justify-between pl-7 font-mono text-[9px] text-ink-4">
                     <span x-text="'−' + ({'1h':'1 h','24h':'24 h','7d':'7 d','30d':'30 d'})[range]"></span>
                     <span>{{ __('dashboard.axis_now') }}</span>
                 </div>