From 3aa6ff1fdd0e3fb10bad2ec7ba02250ab915518d Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 16 Oct 2026 22:41:15 +0200
Subject: [PATCH] fix(ui): let the desktop sidebar scroll on short screens

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/views/components/navbar.blade.php |  2 +-
 resources/views/layouts/app.blade.php       |  2 +-
 tests/v4/Browser/SidebarScrollTest.php      | 66 +++++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 tests/v4/Browser/SidebarScrollTest.php

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 361b7fc701..e60f1246fc 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,6 +1,6 @@
 @props(['deploymentsIndicator' => false])
 
-<nav class="flex flex-col flex-1 bg-white border-r border-neutral-200 dark:border-white/[0.06] dark:bg-panel pt-2"
+<nav class="flex min-h-0 flex-col flex-1 bg-white border-r border-neutral-200 dark:border-white/[0.06] dark:bg-panel pt-2"
     :class="collapsed ? 'px-2 lg:px-3 sidebar-collapsed' : 'px-2 lg:px-3'"
     @mouseover="
         if (!collapsed) return;
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index dab1ed7a94..51bc6a8640 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -142,7 +142,7 @@
             {{-- ============ DESKTOP SIDEBAR (below top bar) ============ --}}
             <div class="hidden lg:fixed lg:top-12 lg:bottom-0 lg:left-0 lg:z-40 lg:flex lg:flex-col min-w-0"
                 :class="[collapsed ? 'lg:w-16' : 'lg:w-56', sidebarReady ? 'transition-[width] duration-200' : '']">
-                <div class="flex grow min-w-0 flex-col overflow-visible">
+                <div class="flex min-h-0 grow min-w-0 flex-col overflow-visible">
                     <x-navbar deployments-indicator />
                 </div>
             </div>
diff --git a/tests/v4/Browser/SidebarScrollTest.php b/tests/v4/Browser/SidebarScrollTest.php
new file mode 100644
index 0000000000..b33925f630
--- /dev/null
+++ b/tests/v4/Browser/SidebarScrollTest.php
@@ -0,0 +1,66 @@
+<?php
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+uses(RefreshDatabase::class);
+
+beforeEach(function () {
+    $this->stack = seedBrowserResourceStack();
+    $this->application = createBrowserApplication($this->stack, [
+        'uuid' => 'app-sidebar-scroll',
+        'name' => 'Sidebar Scroll App',
+    ]);
+});
+
+/**
+ * @return array{bottom: float, viewport: int, overflows: bool, scrolled: bool}
+ */
+function measureSidebarScroll(mixed $page, string $scrollerSelector, string $frameSelector): array
+{
+    return $page->script(sprintf(<<<'JS'
+        () => {
+            const scroller = document.querySelector(%s);
+            const frame = document.querySelector(%s);
+            scroller.scrollTop = scroller.scrollHeight;
+
+            return {
+                bottom: frame.getBoundingClientRect().bottom,
+                viewport: window.innerHeight,
+                overflows: scroller.scrollHeight > scroller.clientHeight,
+                scrolled: scroller.scrollTop > 0,
+            };
+        }
+    JS, json_encode($scrollerSelector), json_encode($frameSelector)));
+}
+
+it('scrolls the main sidebar inside a short viewport', function () {
+    loginAndSkipBoarding();
+
+    $page = visit('/')->resize(1440, 420)->assertSee('Dashboard');
+
+    $sidebar = measureSidebarScroll($page, 'div.lg\\:fixed nav > ul[role="list"]', 'div.lg\\:fixed nav');
+
+    $page->screenshot(filename: 'main-sidebar-scroll');
+
+    expect($sidebar['bottom'])->toBeLessThanOrEqual($sidebar['viewport'])
+        ->and($sidebar['overflows'])->toBeTrue()
+        ->and($sidebar['scrolled'])->toBeTrue();
+});
+
+it('scrolls the resource settings sidebar inside a short viewport', function () {
+    loginAndSkipBoarding();
+
+    $page = visit(applicationConfigurationUrl(
+        $this->stack['project'],
+        $this->stack['environment'],
+        $this->application
+    ))->resize(1440, 420)->assertSee('Sidebar Scroll App');
+
+    $sidebar = measureSidebarScroll($page, '.application-settings-navigation', '.application-settings-navigation');
+
+    $page->screenshot(filename: 'settings-sidebar-scroll');
+
+    expect($sidebar['bottom'])->toBeLessThanOrEqual($sidebar['viewport'])
+        ->and($sidebar['overflows'])->toBeTrue()
+        ->and($sidebar['scrolled'])->toBeTrue();
+});