fix(ui): keep update badge inside the sidebar brand area

Closes #11801
This commit is contained in:
Andras Bacsai
2026-10-16 00:17:10 +02:00
parent 70d4dad494
commit b15f15f22d
2 changed files with 41 additions and 4 deletions
+4 -4
View File
@@ -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">
@@ -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']);