From b15f15f22d2a8c677e32f3ea80f04dc9a064aca3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 16 Oct 2026 00:17:10 +0200
Subject: [PATCH] fix(ui): keep update badge inside the sidebar brand area

Closes #11801
---
 resources/views/layouts/app.blade.php       |  8 ++---
 tests/v4/Browser/UpgradeBadgeLayoutTest.php | 37 +++++++++++++++++++++
 2 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 tests/v4/Browser/UpgradeBadgeLayoutTest.php

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index dc7c1e3e88..dab1ed7a94 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -63,15 +63,15 @@
                 {{-- Brand (width tracks sidebar) --}}
                 <div class="flex items-center gap-2 h-full shrink-0 border-r border-neutral-200 dark:border-white/[0.06] transition-[width] duration-200"
                     :class="collapsed ? 'w-16 justify-center px-0' : 'w-56 px-4'">
-                    <div class="flex shrink-0 items-baseline gap-1.5 min-w-0">
+                    <div class="flex items-baseline gap-1.5 min-w-0">
                         <a href="/" {{ wireNavigate() }} title="Coolify"
-                            class="flex items-center hover:opacity-80 transition-opacity">
+                            class="flex shrink-0 items-center hover:opacity-80 transition-opacity">
                             <img x-show="collapsed" x-cloak src="/coolify-logo.svg" alt="Coolify"
                                 class="size-5" />
                             <span x-show="!collapsed" class="text-[15px] font-semibold tracking-tight text-black dark:text-white">Coolify</span>
                         </a>
-                        <x-version x-show="!collapsed"
-                            class="!text-[10.5px] font-medium text-neutral-400 dark:text-fg-faint !opacity-100 hover:!opacity-100 dark:hover:text-fg hover:text-black" />
+                        <x-version x-show="!collapsed" title="v{{ config('constants.coolify.version') }}"
+                            class="min-w-0 truncate !text-[10.5px] font-medium text-neutral-400 dark:text-fg-faint !opacity-100 hover:!opacity-100 dark:hover:text-fg hover:text-black" />
                     </div>
                     @if (isInstanceAdmin() && !isCloud())
                         <div x-show="!collapsed" class="ml-auto shrink-0">
diff --git a/tests/v4/Browser/UpgradeBadgeLayoutTest.php b/tests/v4/Browser/UpgradeBadgeLayoutTest.php
new file mode 100644
index 0000000000..361e4a097b
--- /dev/null
+++ b/tests/v4/Browser/UpgradeBadgeLayoutTest.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Cache;
+
+uses(RefreshDatabase::class);
+
+it('keeps the update badge inside the sidebar brand area', function (string $version) {
+    config()->set('constants.coolify.version', $version);
+    seedBrowserResourceStack(['instanceSettings' => ['new_version_available' => true]]);
+    Cache::put('coolify:versions:all', ['coolify' => ['v4' => ['version' => '9.9.9']]], 3600);
+
+    $page = visit('/login')
+        ->fill('email', 'test@example.com')
+        ->fill('password', 'password')
+        ->click('Login')
+        ->assertSee('Dashboard')
+        ->assertVisible('header button[aria-label="Update available"]');
+
+    $layout = $page->script(<<<'JS'
+        () => {
+            const badge = document.querySelector('header button[aria-label="Update available"]');
+            const brand = badge.closest('header > div');
+
+            return {
+                badgeRight: badge.getBoundingClientRect().right,
+                brandRight: brand.getBoundingClientRect().right,
+                brandOverflows: brand.scrollWidth > brand.clientWidth,
+            };
+        }
+    JS);
+
+    $page->screenshot(filename: 'upgrade-badge-layout');
+
+    expect($layout['brandOverflows'])->toBeFalse()
+        ->and($layout['badgeRight'])->toBeLessThanOrEqual($layout['brandRight']);
+})->with(['4.3.19', '4.0.0-beta.470']);