From 649e90ab3b601a55f603e354ac2504b99dc20b11 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sat, 24 Oct 2026 21:58:42 +0200
Subject: [PATCH] fix(ui): show resource menus in the sidebar and mobile
 drawer, not in the page

The main sidebar shows the resource menu from lg, where it appears, and the
mobile drawer shows it too, so the page grid menu is gone. The drawer opens
on the menu of the current page again after it closes. Below xl, the resource
actions are a compact button in line with the title.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bootstrap/helpers/shared.php                  |   2 +-
 resources/css/app.css                         |  25 ++-
 .../configuration-sidebar.blade.php           |  16 +-
 .../views/components/backup-sidebar.blade.php |   4 +-
 .../database/configuration-sidebar.blade.php  |  16 +-
 .../views/components/main-nav-menu.blade.php  |   8 +-
 resources/views/components/navbar.blade.php   |  60 +++--
 .../views/components/server/sidebar.blade.php |  16 +-
 .../service-database/sidebar.blade.php        |   2 +-
 .../service/configuration-sidebar.blade.php   |   6 +-
 .../views/components/split-action.blade.php   |   2 +-
 .../livewire/destination/sidebar.blade.php    |   4 +-
 .../project/application/heading.blade.php     | 207 +++++++++---------
 .../project/database/heading.blade.php        |  85 +++----
 .../project/service/heading.blade.php         | 179 +++++++--------
 .../livewire/project/service/index.blade.php  |   2 +-
 .../views/livewire/server/navbar.blade.php    | 183 ++++++++--------
 .../livewire/source/github/change.blade.php   |   4 +-
 .../views/livewire/storage/show.blade.php     |   4 +-
 tests/Feature/BreadcrumbsVisibilityTest.php   |   7 +-
 20 files changed, 430 insertions(+), 402 deletions(-)

diff --git a/bootstrap/helpers/shared.php b/bootstrap/helpers/shared.php
index f34a15aaf2..7ce429bfd1 100644
--- a/bootstrap/helpers/shared.php
+++ b/bootstrap/helpers/shared.php
@@ -4628,7 +4628,7 @@ function wireNavigate(): string
 }
 
 /**
- * Registers a resource menu that the main sidebar shows in place of its main menu on wide screens
+ * Registers a resource menu that the main sidebar and the mobile drawer show in place of their main menu
  * (see components/navbar.blade.php). The menu teleports itself into #main-nav-context-{depth}.
  * Back on a menu shows the menu one depth lower, and Back at depth 0 shows the main menu.
  */
diff --git a/resources/css/app.css b/resources/css/app.css
index ad9c56a420..4874b60767 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -2167,6 +2167,16 @@ html[data-theme="custom"]:not(.dark) :is(.application-settings-section, .applica
     }
 }
 
+/* A resource menu that the main sidebar (and the mobile drawer) shows instead
+   (navbar #main-nav-context-{depth}). */
+.application-settings-navigation.in-main-nav {
+    display: none;
+}
+
+.application-settings-navigation.in-main-nav ~ * {
+    grid-column: 1 / -1;
+}
+
 @media (min-width: 1280px) {
     /* Fixed like the main sidebar (3rem → bottom); left tracks its width (--sidebar-w).
        Fixed leaves the grid, so the content sibling is pinned to column 2 below. */
@@ -2193,15 +2203,6 @@ html[data-theme="custom"]:not(.dark) :is(.application-settings-section, .applica
         grid-column: 2;
     }
 
-    /* A resource menu that the main sidebar shows instead (navbar #main-nav-context-{depth}). */
-    .application-settings-navigation.in-main-nav {
-        display: none;
-    }
-
-    .application-settings-navigation.in-main-nav ~ * {
-        grid-column: 1 / -1;
-    }
-
     html:not(.dark) .application-settings-navigation {
         --rail-fill: var(--coollabs-base);
     }
@@ -6788,12 +6789,12 @@ html.dark .project-card-stats-dot {
     }
 }
 
-/* Resource menu in the collapsed main sidebar: icons only. */
-.sidebar-collapsed .nav-context-menu :is(.menu-item-label, .nav-children, .menu-item > :not(.menu-item-icon)) {
+/* Resource menu in the collapsed desktop sidebar: icons only (the mobile drawer never collapses). */
+.app-sidebar .sidebar-collapsed .nav-context-menu :is(.menu-item-label, .nav-children, .menu-item > :not(.menu-item-icon)) {
     display: none !important;
 }
 
-.sidebar-collapsed .nav-context-menu .menu-item {
+.app-sidebar .sidebar-collapsed .nav-context-menu .menu-item {
     justify-content: center;
     padding-left: 0;
     padding-right: 0;
diff --git a/resources/views/components/application/configuration-sidebar.blade.php b/resources/views/components/application/configuration-sidebar.blade.php
index 5d927443de..592c81e48f 100644
--- a/resources/views/components/application/configuration-sidebar.blade.php
+++ b/resources/views/components/application/configuration-sidebar.blade.php
@@ -227,11 +227,11 @@
     @endphp
 
 @php
-    // The main sidebar shows this menu on wide screens (see components/navbar.blade.php).
+    // The main sidebar and the mobile drawer show this menu (see components/navbar.blade.php).
     registerMainNavContext(0, 'Dashboard', 'Back to the main menu');
 @endphp
 
-{{-- Rendered twice: in the page (below xl), and teleported into the main sidebar (xl and up).
+{{-- Rendered twice: in the page (CSS hides it; it keeps the command palette items), and teleported into the main sidebar.
      navOnly renders only the sidebar copy, as the parent menu of a deeper page (e.g. a backup). --}}
 @foreach ($navOnly ? ['main-nav'] : ['page', 'main-nav'] as $placement)
 @if ($placement === 'main-nav')
@@ -239,19 +239,15 @@
 <div class="nav-context-menu">
 @else
 <aside @class([
-    'application-settings-navigation in-main-nav min-w-0 xl:self-start',
+    'application-settings-navigation in-main-nav min-w-0',
     'is-flush' => $flush,
 ]) data-settings-search-items="{{ json_encode($settingsSearchItems) }}">
 @endif
                 <nav aria-label="Configuration sections"
-                    @class([
-                        'grid gap-0.5',
-                        'grid-cols-2 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]' => $placement === 'page',
-                        'grid-cols-1' => $placement === 'main-nav',
-                    ])>
+                    class="grid grid-cols-1 gap-0.5">
                     @foreach ($groupedMenuItems as $groupLabel => $groupItems)
                         @unless ($loop->first)
-                            <div class="my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]"
+                            <div class="my-2 border-t border-neutral-200 dark:border-white/[0.06]"
                                 aria-hidden="true"></div>
                         @endunless
                         @foreach ($groupItems as $menuItem)
@@ -280,7 +276,7 @@
                                 {{-- Sub-sections belong to the current page only; collapse them for
                                      every other item so the sidebar stays short. --}}
                                 @if ($menuItem['active'] && filled($sections))
-                                    <div class="nav-children hidden flex-col gap-0.5 py-1 xl:flex"
+                                    <div class="nav-children flex flex-col gap-0.5 py-1"
                                         x-data="{ activeSection: '' }">
                                         @foreach ($sections as $section)
                                             <button type="button" class="menu-subitem"
diff --git a/resources/views/components/backup-sidebar.blade.php b/resources/views/components/backup-sidebar.blade.php
index 900a0be0b6..efa09f884a 100644
--- a/resources/views/components/backup-sidebar.blade.php
+++ b/resources/views/components/backup-sidebar.blade.php
@@ -54,7 +54,7 @@
 <x-main-nav-menu :depth="1" :back-label="$parentMenu" :back-title="'Back to the '.strtolower($parentMenu).' menu'"
     data-settings-search-items="{{ json_encode(settingsSearchItems(['Backup' => collect($items)->map(fn (array $item): array => [...$item, 'route' => $routes[$item['key']]])], $parameters)) }}">
     <nav aria-label="Backup settings"
-        class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
+        class="grid grid-cols-1 gap-0.5">
         <a class="menu-item" data-page-only {{ wireNavigate() }} href="{{ route($routes['back'], $backParameters) }}">
             <x-reicon name="logout" class="menu-item-icon rotate-180" />
             <span class="menu-item-label">{{ $backLabel }}</span>
@@ -62,7 +62,7 @@
 
         @foreach ($items as $item)
             @if ($item['key'] === 'danger')
-                <div class="col-span-full my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]" aria-hidden="true"></div>
+                <div class="col-span-full my-2 border-t border-neutral-200 dark:border-white/[0.06]" aria-hidden="true"></div>
             @endif
             <a @class([
                 'menu-item',
diff --git a/resources/views/components/database/configuration-sidebar.blade.php b/resources/views/components/database/configuration-sidebar.blade.php
index c11eaa05b1..57c5d7ae40 100644
--- a/resources/views/components/database/configuration-sidebar.blade.php
+++ b/resources/views/components/database/configuration-sidebar.blade.php
@@ -59,29 +59,25 @@
 @endphp
 
 @php
-    // The main sidebar shows this menu on wide screens (see components/navbar.blade.php).
+    // The main sidebar and the mobile drawer show this menu (see components/navbar.blade.php).
     registerMainNavContext(0, 'Dashboard', 'Back to the main menu');
 @endphp
 
-{{-- Rendered twice: in the page (below xl), and teleported into the main sidebar (xl and up).
+{{-- Rendered twice: in the page (CSS hides it; it keeps the command palette items), and teleported into the main sidebar.
      navOnly renders only the sidebar copy, as the parent menu of a deeper page (e.g. a backup). --}}
 @foreach ($navOnly ? ['main-nav'] : ['page', 'main-nav'] as $placement)
 @if ($placement === 'main-nav')
 @teleport('#main-nav-context-0')
 <div class="nav-context-menu">
 @else
-<aside class="application-settings-navigation in-main-nav min-w-0 xl:self-start"
+<aside class="application-settings-navigation in-main-nav min-w-0"
     data-settings-search-items="{{ json_encode(settingsSearchItems($groupedItems, $databaseRouteParameters, ['project.database.configuration' => $pageSections])) }}">
 @endif
     <nav aria-label="Database settings"
-        @class([
-            'grid gap-0.5',
-            'grid-cols-2 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]' => $placement === 'page',
-            'grid-cols-1' => $placement === 'main-nav',
-        ])>
+        class="grid grid-cols-1 gap-0.5">
         @foreach ($groupedItems as $groupLabel => $groupItems)
             @unless ($loop->first)
-                <div class="my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]" aria-hidden="true"></div>
+                <div class="my-2 border-t border-neutral-200 dark:border-white/[0.06]" aria-hidden="true"></div>
             @endunless
             @foreach ($groupItems as $menuItem)
                 <a @class(['menu-item', 'menu-item-active' => $menuItem['active']])
@@ -94,7 +90,7 @@
                     @endif
                 </a>
                 @if ($menuItem['active'] && $menuItem['route'] === 'project.database.configuration' && $pageSections !== [])
-                    <div class="nav-children hidden flex-col gap-0.5 py-1 xl:flex"
+                    <div class="nav-children flex flex-col gap-0.5 py-1"
                         x-data="{
                             activeSection: '',
                             scrollToSection(id) {
diff --git a/resources/views/components/main-nav-menu.blade.php b/resources/views/components/main-nav-menu.blade.php
index 3dc4687d2e..e38134e110 100644
--- a/resources/views/components/main-nav-menu.blade.php
+++ b/resources/views/components/main-nav-menu.blade.php
@@ -1,13 +1,13 @@
 @props(['backLabel', 'backTitle' => 'Back to the main menu', 'depth' => 0, 'navOnly' => false])
 @php
-    // The main sidebar replaces its menu with this one on wide screens (see components/navbar.blade.php).
+    // The main sidebar and the mobile drawer replace their menu with this one (see components/navbar.blade.php).
     registerMainNavContext($depth, $backLabel, $backTitle);
 @endphp
-{{-- A page menu, rendered twice: in the page (below xl, CSS hides it on xl), and teleported into the
-     main sidebar (xl and up). The slot must not contain Livewire components (they would render twice).
+{{-- A page menu, rendered twice: in the page (CSS hides it), and teleported into the
+     main sidebar. The slot must not contain Livewire components (they would render twice).
      navOnly renders only the sidebar copy: a deeper page uses it to keep its parent menu one Back away. --}}
 @unless ($navOnly)
-    <aside {{ $attributes->class('application-settings-navigation in-main-nav min-w-0 xl:self-start') }}>
+    <aside {{ $attributes->class('application-settings-navigation in-main-nav min-w-0') }}>
         {{ $slot }}
     </aside>
 @endunless
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 4739c4e09e..ba8c003d27 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -24,7 +24,7 @@
         // Label of the open submenu ('' = main menu). It starts on the submenu of the current page
         // ([data-active-submenu], read in init). Back opens the main menu.
         submenu: '',
-        // Depth of the open resource menu on wide screens (-1 = main menu or submenu). It starts on the
+        // Depth of the open resource menu (-1 = main menu or submenu). It starts on the
         // deepest menu of the current page; Back opens the menu one depth lower.
         navLevel: -1,
         // Direction of the last menu swap ('forward' or 'back'); it selects the enter animation of every menu.
@@ -35,25 +35,53 @@
             const ua = navigator.userAgent || '';
             return /Mac|iPhone|iPad|iPod/i.test(platform) || /Mac OS X|Macintosh/i.test(ua) ? '⌘' : 'Ctrl+';
         })(),
+        // Shows the menu of the current page: its deepest resource menu, or the submenu that holds it.
+        showCurrentPageMenu() {
+            this.submenu = this.$root.querySelector('[data-active-submenu]')?.dataset.activeSubmenu || '';
+            this.navLevel = Number([...this.$root.querySelectorAll('[data-nav-level]')].pop()?.dataset.navLevel ?? -1);
+        },
         init() {
-                this.submenu = this.$root.querySelector('[data-active-submenu]')?.dataset.activeSubmenu || '';
-                this.navLevel = Number([...this.$root.querySelectorAll('[data-nav-level]')].pop()?.dataset.navLevel ?? -1);
+                this.showCurrentPageMenu();
                 if (@js($desktop)) {
                     // The open resource menu depth is kept across page loads: a page that opens a deeper menu
                     // (e.g. a backup) plays the forward swap, and a page that opens a lower one plays the back swap.
                     const previousLevel = sessionStorage.getItem('navLevel');
-                    if (previousLevel !== null && window.matchMedia('(min-width: 80rem)').matches) {
+                    if (previousLevel !== null && window.matchMedia('(min-width: 64rem)').matches) {
                         const levelChange = this.navLevel - Number(previousLevel);
                         this.navSwap = levelChange > 0 ? 'forward' : (levelChange < 0 ? 'back' : '');
                     }
                     sessionStorage.setItem('navLevel', this.navLevel);
                     this.$watch('navLevel', level => sessionStorage.setItem('navLevel', level));
+                } else {
+                    // The resource menus teleport into the desktop sidebar. The mobile drawer moves them into
+                    // its own slots when it opens, and gives them back when the desktop sidebar shows.
+                    const moveResourceMenus = toDrawer => this.$root.querySelectorAll('[data-mobile-nav-context]').forEach(drawerSlot => {
+                        const desktopSlot = document.getElementById('main-nav-context-' + drawerSlot.dataset.mobileNavContext);
+                        if (desktopSlot) {
+                            toDrawer ? drawerSlot.append(...desktopSlot.childNodes) : desktopSlot.append(...drawerSlot.childNodes);
+                        }
+                    });
+                    this.desktopQuery = window.matchMedia('(min-width: 64rem)');
+                    this.onDesktopChange = event => event.matches && moveResourceMenus(false);
+                    this.desktopQuery.addEventListener('change', this.onDesktopChange);
+                    // A closed drawer forgets where Back went: it opens again on the menu of the current page.
+                    this.$watch('open', isOpen => {
+                        if (isOpen) {
+                            moveResourceMenus(true);
+                        } else {
+                            this.navSwap = '';
+                            this.showCurrentPageMenu();
+                        }
+                    });
                 }
                 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
                     if (localStorage.getItem('theme') === 'system') { window.applyStoredTheme(); }
                 });
                 window.applyStoredTheme();
             },
+        destroy() {
+            this.desktopQuery?.removeEventListener('change', this.onDesktopChange);
+        },
     }">
     {{-- Search is only useful when workspace resources are available --}}
     @if (isSubscribed() || ! isCloud())
@@ -153,18 +181,18 @@
                     ->all());
                 $activeSubmenu = $navSections->flatten(1)->first(fn (array $item): bool => isset($item['children']) && $item['active']);
                 // Resource menus by depth, registered by registerMainNavContext() (e.g. from
-                // components/main-nav-menu.blade.php). Each one teleports itself into #main-nav-context-{depth};
-                // only the desktop sidebar has the slots.
-                $navContext = $desktop ? request()->attributes->get('mainNavContext', []) : [];
+                // components/main-nav-menu.blade.php). Each one teleports itself into #main-nav-context-{depth}
+                // (the desktop sidebar); the mobile drawer moves it into its own slot while it shows (see init).
+                $navContext = request()->attributes->get('mainNavContext', []);
             @endphp
-            {{-- Wide screens on a resource page: the deepest resource menu replaces the main menu. Back shows the
+            {{-- On a resource page the deepest resource menu replaces the main menu. Back shows the
                  menu one depth lower, and then the main menu (or its submenu), without leaving the page. --}}
             @foreach ($navContext as $depth => $navMenu)
                 @php
                     $previousDepth = collect($navContext)->keys()->filter(fn (int $key): bool => $key < $depth)->last() ?? -1;
                 @endphp
                 <li x-show="navLevel === {{ $depth }}" data-nav-level="{{ $depth }}" @unless ($loop->last) x-cloak @endunless
-                    class="hidden xl:contents">
+                    class="contents">
                     <ul role="list" class="flex flex-col gap-y-0.5" :class="navSwap && 'nav-swap-' + navSwap">
                         <li class="mb-1">
                             <button type="button" @click="navLevel = {{ $previousDepth }}; navSwap = 'back'"
@@ -177,7 +205,8 @@
                                     :class="collapsed && 'lg:hidden'">{{ $navMenu['label'] }}</span>
                             </button>
                         </li>
-                        <li id="main-nav-context-{{ $depth }}" class="nav-context min-w-0"></li>
+                        <li @if ($desktop) id="main-nav-context-{{ $depth }}" @else data-mobile-nav-context="{{ $depth }}" @endif
+                            class="nav-context min-w-0"></li>
                     </ul>
                 </li>
             @endforeach
@@ -187,9 +216,9 @@
                 $renderedSubmenus = $navSections->flatten(1)->filter(fn (array $item): bool => isset($item['children']));
             @endphp
             @foreach ($renderedSubmenus as $submenuItem)
-                <li x-show="submenu === @js($submenuItem['label'])"
-                    @if ($submenuItem['active']) data-active-submenu="{{ $submenuItem['label'] }}" @else x-cloak @endif
-                    @class(['contents', 'xl:hidden' => $navContext]) :class="{ 'xl:hidden': navLevel !== -1 }">
+                <li x-show="navLevel === -1 && submenu === @js($submenuItem['label'])"
+                    @if ($submenuItem['active']) data-active-submenu="{{ $submenuItem['label'] }}" @endif
+                    @if (! $submenuItem['active'] || $navContext) x-cloak @endif class="contents">
                     <ul role="list" class="flex flex-col gap-y-0.5" :class="navSwap && 'nav-swap-' + navSwap">
                         <li class="mb-1">
                             <button type="button" @click="submenu = ''; navSwap = 'back'" title="Back to the main menu" aria-label="Back to the main menu"
@@ -231,7 +260,7 @@
                     </ul>
                 </li>
             @endforeach
-            <li x-show="!submenu" @if ($activeSubmenu) x-cloak @endif @class(['contents', 'xl:hidden' => $navContext]) :class="{ 'xl:hidden': navLevel !== -1 }">
+            <li x-show="navLevel === -1 && !submenu" @if ($activeSubmenu || $navContext) x-cloak @endif class="contents">
                 <ul role="list" class="flex flex-col gap-y-0.5" :class="navSwap && 'nav-swap-' + navSwap">
             @foreach ($navSections as $sectionLabel => $sectionItems)
                 {{-- The first section needs no title. --}}
@@ -269,8 +298,7 @@
         @endif
         @if (auth()->id() === 0 && (isCloud() || isDev()))
             {{-- Part of the main menu: hidden while a submenu or a resource menu shows. --}}
-            <li x-show="!submenu" @if ($activeSubmenu ?? null) x-cloak @endif @class(['xl:hidden' => $navContext ?? []])
-                :class="{ 'xl:hidden': navLevel !== -1 }">
+            <li x-show="navLevel === -1 && !submenu" @if (($activeSubmenu ?? null) || ($navContext ?? [])) x-cloak @endif>
                 <a title="Admin" {{ wireNavigate() }}
                     class="nav-admin {{ request()->is('admin') ? 'menu-item-active menu-item' : 'menu-item' }}"
                     :class="collapsed && 'lg:justify-center lg:px-0'" href="{{ route('admin.index') }}">
diff --git a/resources/views/components/server/sidebar.blade.php b/resources/views/components/server/sidebar.blade.php
index a0f950c74d..600ff14018 100644
--- a/resources/views/components/server/sidebar.blade.php
+++ b/resources/views/components/server/sidebar.blade.php
@@ -227,11 +227,11 @@
 @endphp
 
 @php
-    // The main sidebar shows this menu on wide screens (see components/navbar.blade.php).
+    // The main sidebar and the mobile drawer show this menu (see components/navbar.blade.php).
     registerMainNavContext(0, 'Servers', 'Back to the main menu');
 @endphp
 
-{{-- Rendered twice: in the page (below xl), and teleported into the main sidebar (xl and up).
+{{-- Rendered twice: in the page (CSS hides it; it keeps the command palette items), and teleported into the main sidebar.
      Both copies keep their own warning state (proxy, Sentinel). --}}
 @foreach (['page', 'main-nav'] as $placement)
 @if ($placement === 'main-nav')
@@ -261,7 +261,7 @@
         scheduleSentinelExpiry($event.detail.expiresInMilliseconds);
     ">
 @else
-<aside class="application-settings-navigation in-main-nav min-w-0 xl:self-start"
+<aside class="application-settings-navigation in-main-nav min-w-0"
     data-settings-search-items="{{ json_encode(settingsSearchItems($groupedServerMenuItems, $serverRouteParameters)) }}"
     x-data="{
         proxyConfigurationPending: @js($server->hasPendingProxyConfiguration()),
@@ -288,14 +288,10 @@
     ">
 @endif
     <nav aria-label="Server configuration sections"
-        @class([
-            'grid gap-0.5',
-            'grid-cols-2 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]' => $placement === 'page',
-            'grid-cols-1' => $placement === 'main-nav',
-        ])>
+        class="grid grid-cols-1 gap-0.5">
         @foreach ($groupedServerMenuItems as $groupLabel => $groupItems)
             @unless ($loop->first)
-                <div class="my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]"
+                <div class="my-2 border-t border-neutral-200 dark:border-white/[0.06]"
                     aria-hidden="true"></div>
             @endunless
             @foreach ($groupItems as $menuItem)
@@ -332,7 +328,7 @@
                     @endif
                 </a>
                 @if ($menuItem['active'] && isset($menuItem['children']))
-                    <div class="col-span-full grid grid-cols-2 gap-0.5 border-l border-neutral-200 pl-2 sm:grid-cols-3 xl:grid-cols-1 dark:border-white/[0.08]">
+                    <div class="col-span-full grid grid-cols-1 gap-0.5 border-l border-neutral-200 pl-2 dark:border-white/[0.08]">
                         @foreach (collect($menuItem['children'])->filter(fn (array $child): bool => $child['visible'] ?? true) as $child)
                             <a wire:key="{{ $placement }}-server-settings-child-{{ str($menuItem['label'].'-'.$child['label'])->slug() }}"
                                 @class(['menu-item', 'menu-item-active' => $child['active']])
diff --git a/resources/views/components/service-database/sidebar.blade.php b/resources/views/components/service-database/sidebar.blade.php
index b3af548d0b..a8de58b734 100644
--- a/resources/views/components/service-database/sidebar.blade.php
+++ b/resources/views/components/service-database/sidebar.blade.php
@@ -5,7 +5,7 @@
 
 <x-main-nav-menu :depth="1" back-label="Service" back-title="Back to the service menu">
     <nav aria-label="Compose resource settings"
-        class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
+        class="grid grid-cols-1 gap-0.5">
         <a class="menu-item" data-page-only {{ wireNavigate() }}
             href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
             <x-reicon name="logout" class="menu-item-icon rotate-180" />
diff --git a/resources/views/components/service/configuration-sidebar.blade.php b/resources/views/components/service/configuration-sidebar.blade.php
index 5682c8c282..8dc25b96b0 100644
--- a/resources/views/components/service/configuration-sidebar.blade.php
+++ b/resources/views/components/service/configuration-sidebar.blade.php
@@ -54,10 +54,10 @@
 <x-main-nav-menu back-label="Dashboard" :nav-only="$navOnly"
     data-settings-search-items="{{ json_encode(settingsSearchItems($groupedItems, $serviceRouteParameters)) }}">
     <nav aria-label="Service settings"
-        class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
+        class="grid grid-cols-1 gap-0.5">
         @foreach ($groupedItems as $groupLabel => $groupItems)
             @unless ($loop->first)
-                <div class="my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]" aria-hidden="true"></div>
+                <div class="my-2 border-t border-neutral-200 dark:border-white/[0.06]" aria-hidden="true"></div>
             @endunless
             @foreach ($groupItems as $menuItem)
                 <a @class(['menu-item', 'menu-item-active' => $menuItem['active']])
@@ -73,7 +73,7 @@
                     @endif
                 </a>
                 @if ($menuItem['active'] && $menuItem['route'] === 'project.service.storages' && $storageSections->isNotEmpty())
-                    <div class="nav-children hidden flex-col gap-0.5 py-1 xl:flex"
+                    <div class="nav-children flex flex-col gap-0.5 py-1"
                         x-data="{ activeSection: '' }">
                         @foreach ($storageSections as $section)
                             <button type="button" class="menu-subitem"
diff --git a/resources/views/components/split-action.blade.php b/resources/views/components/split-action.blade.php
index c27525166c..41fb880c6a 100644
--- a/resources/views/components/split-action.blade.php
+++ b/resources/views/components/split-action.blade.php
@@ -12,7 +12,7 @@
             </span>
         </button>
         <div x-cloak x-show="open" x-transition.origin.top
-            class="listbox-panel right-0! xl:left-auto! xl:min-w-60! xl:max-w-96!" role="menu">
+            class="listbox-panel right-0! left-auto! xl:min-w-60! xl:max-w-96!" role="menu">
             {{ $slot }}
         </div>
     @endif
diff --git a/resources/views/livewire/destination/sidebar.blade.php b/resources/views/livewire/destination/sidebar.blade.php
index 2185785061..2730b39595 100644
--- a/resources/views/livewire/destination/sidebar.blade.php
+++ b/resources/views/livewire/destination/sidebar.blade.php
@@ -25,10 +25,10 @@
 <x-main-nav-menu back-label="Destinations" back-title="Back to Integrations"
     data-settings-search-items="{{ json_encode(settingsSearchItems(['Destination' => $destinationMenuItems], $destinationRouteParameters)) }}">
     <nav aria-label="Destination settings"
-        class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
+        class="grid grid-cols-1 gap-0.5">
         @foreach ($destinationMenuItems as $menuItem)
             @if ($menuItem['label'] === 'Danger Zone')
-                <div class="col-span-full my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]" aria-hidden="true"></div>
+                <div class="col-span-full my-2 border-t border-neutral-200 dark:border-white/[0.06]" aria-hidden="true"></div>
             @endif
             <a wire:key="destination-settings-{{ str($menuItem['label'])->slug() }}"
                 @class(['menu-item', 'menu-item-active' => $menuItem['active']])
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index 46528d84fc..3303327c99 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -9,116 +9,119 @@
             </x-callout>
         @endif
 
-        <div class="mb-3 w-full xl:hidden">
-            <div class="flex min-w-0 flex-col items-start gap-2">
-                <h1 class="min-w-0 max-w-full truncate text-[24px]! leading-7! font-semibold! tracking-tight! text-black dark:text-fg">
-                    {{ $application->name }}
-                </h1>
-                <div class="relative flex w-full min-w-0 items-center gap-2">
-                    <x-status-summary :status="$application->status"
-                        :healthcheck-url="route('project.application.healthcheck', $parameters)" />
-                    <x-applications.links :application="$application" compact />
-                    @if ($this->runningDeploymentUrl)
-                        <x-deploying-indicator :href="$this->runningDeploymentUrl" />
-                    @endif
-                </div>
-                <div class="flex w-full flex-wrap gap-1">
-                    <x-application.restart-limit-warning :application="$application" />
+        {{-- Below xl: the title and the resource actions share one row. --}}
+        <div class="mb-3 flex w-full min-w-0 items-start gap-3 xl:hidden">
+            <div class="min-w-0 flex-1">
+                <div class="flex min-w-0 flex-col items-start gap-2">
+                    <h1 class="min-w-0 max-w-full truncate text-[24px]! leading-7! font-semibold! tracking-tight! text-black dark:text-fg">
+                        {{ $application->name }}
+                    </h1>
+                    <div class="relative flex w-full min-w-0 items-center gap-2">
+                        <x-status-summary :status="$application->status"
+                            :healthcheck-url="route('project.application.healthcheck', $parameters)" />
+                        <x-applications.links :application="$application" compact />
+                        @if ($this->runningDeploymentUrl)
+                            <x-deploying-indicator :href="$this->runningDeploymentUrl" />
+                        @endif
+                    </div>
+                    <div class="flex w-full flex-wrap gap-1">
+                        <x-application.restart-limit-warning :application="$application" />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="w-full xl:hidden">
-            @if (!($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)))
-                @can('deploy', $application)
-                    <x-split-action id="application-mobile-actions" class="mb-3 flex w-full">
-                        @if (str($application->status)->startsWith('exited'))
-                            <x-slot:main wire:click="deploy">
-                                <x-reicon name="play-circle" class="size-3.5" />
-                                {{ $application->stoppedAfterRestartLimit() ? 'Retry deployment' : 'Deploy' }}
-                            </x-slot:main>
-                            @if (!$application->destination->server->isSwarm())
-                                <button type="button" class="listbox-option justify-start! gap-2.5!" wire:click="deploy(true)"
-                                    @click="open = false" role="menuitem">
-                                    <x-reicon name="refresh" class="size-3.5 opacity-70" />
-                                    {{ $application->stoppedAfterRestartLimit() ? 'Retry deployment (without cache)' : 'Deploy (without cache)' }}
-                                </button>
-                            @endif
-                            @if ($application->container_present !== false)
-                                <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                    @click="open = false; document.getElementById('application-mobile-stop-trigger')?.click()" role="menuitem">
-                                    <x-reicon name="stop-circle" class="size-3.5 text-error" />
-                                    Remove container
-                                </button>
-                            @endif
-                        @else
-                            @if ($application->destination->server->isSwarm())
-                                @if ($application->build_pack !== 'dockercompose')
-                                    <x-slot:main wire:click="deploy">
-                                        <x-reicon name="refresh" class="size-3.5" />
-                                        Update Service
-                                    </x-slot:main>
-                                @else
-                                    <x-slot:main @click="document.getElementById('application-mobile-stop-trigger')?.click()">
-                                        <x-reicon name="stop-circle" class="size-3.5" />
-                                        Stop
-                                    </x-slot:main>
-                                @endif
-                            @else
+            <div class="shrink-0">
+                @if (!($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)))
+                    @can('deploy', $application)
+                        <x-split-action id="application-mobile-actions">
+                            @if (str($application->status)->startsWith('exited'))
                                 <x-slot:main wire:click="deploy">
-                                    <x-reicon name="refresh" class="size-3.5" />
-                                    Redeploy
+                                    <x-reicon name="play-circle" class="size-3.5" />
+                                    {{ $application->stoppedAfterRestartLimit() ? 'Retry deployment' : 'Deploy' }}
                                 </x-slot:main>
-                                <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                    wire:click="{{ str($application->status)->startsWith('running') ? 'force_deploy_without_cache' : 'deploy(true)' }}"
-                                    @click="open = false" role="menuitem">
-                                    <x-reicon name="refresh" class="size-3.5 opacity-70" />
-                                    Redeploy (without cache)
-                                </button>
-                                @if ($application->build_pack !== 'dockercompose')
-                                    <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                        @click="open = false; document.getElementById('application-mobile-restart-trigger')?.click()"
-                                        role="menuitem">
-                                        <x-reicon name="restart" class="size-3.5 opacity-70" />
-                                        Restart
+                                @if (!$application->destination->server->isSwarm())
+                                    <button type="button" class="listbox-option justify-start! gap-2.5!" wire:click="deploy(true)"
+                                        @click="open = false" role="menuitem">
+                                        <x-reicon name="refresh" class="size-3.5 opacity-70" />
+                                        {{ $application->stoppedAfterRestartLimit() ? 'Retry deployment (without cache)' : 'Deploy (without cache)' }}
                                     </button>
                                 @endif
+                                @if ($application->container_present !== false)
+                                    <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                        @click="open = false; document.getElementById('application-mobile-stop-trigger')?.click()" role="menuitem">
+                                        <x-reicon name="stop-circle" class="size-3.5 text-error" />
+                                        Remove container
+                                    </button>
+                                @endif
+                            @else
+                                @if ($application->destination->server->isSwarm())
+                                    @if ($application->build_pack !== 'dockercompose')
+                                        <x-slot:main wire:click="deploy">
+                                            <x-reicon name="refresh" class="size-3.5" />
+                                            Update Service
+                                        </x-slot:main>
+                                    @else
+                                        <x-slot:main @click="document.getElementById('application-mobile-stop-trigger')?.click()">
+                                            <x-reicon name="stop-circle" class="size-3.5" />
+                                            Stop
+                                        </x-slot:main>
+                                    @endif
+                                @else
+                                    <x-slot:main wire:click="deploy">
+                                        <x-reicon name="refresh" class="size-3.5" />
+                                        Redeploy
+                                    </x-slot:main>
+                                    <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                        wire:click="{{ str($application->status)->startsWith('running') ? 'force_deploy_without_cache' : 'deploy(true)' }}"
+                                        @click="open = false" role="menuitem">
+                                        <x-reicon name="refresh" class="size-3.5 opacity-70" />
+                                        Redeploy (without cache)
+                                    </button>
+                                    @if ($application->build_pack !== 'dockercompose')
+                                        <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                            @click="open = false; document.getElementById('application-mobile-restart-trigger')?.click()"
+                                            role="menuitem">
+                                            <x-reicon name="restart" class="size-3.5 opacity-70" />
+                                            Restart
+                                        </button>
+                                    @endif
+                                @endif
+                                @unless ($application->destination->server->isSwarm() && $application->build_pack === 'dockercompose')
+                                    <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                        @click="open = false; document.getElementById('application-mobile-stop-trigger')?.click()"
+                                        role="menuitem">
+                                        <x-reicon name="stop-circle" class="size-3.5 text-error" />
+                                        Stop
+                                    </button>
+                                @endunless
                             @endif
-                            @unless ($application->destination->server->isSwarm() && $application->build_pack === 'dockercompose')
-                                <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                    @click="open = false; document.getElementById('application-mobile-stop-trigger')?.click()"
-                                    role="menuitem">
-                                    <x-reicon name="stop-circle" class="size-3.5 text-error" />
-                                    Stop
-                                </button>
-                            @endunless
-                        @endif
-                    </x-split-action>
-                @endcan
-            @endif
-            <div class="hidden" aria-hidden="true">
-                <x-modal-confirmation
-                    canGate="deploy" :canResource="$application"
-                    title="{{ str($application->status)->startsWith('exited') ? 'Confirm Container Removal?' : 'Confirm Application Stopping?' }}"
-                    buttonTitle="{{ str($application->status)->startsWith('exited') ? 'Remove container' : 'Stop' }}"
-                    submitAction="stop" :checkboxes="$checkboxes" :actions="[
-                        str($application->status)->startsWith('exited') ? 'The exited application container will be removed.' : 'This application will be stopped.',
-                        str($application->status)->startsWith('exited') ? 'Anonymous volumes may become eligible for Docker cleanup.' : 'All non-persistent data of this application will be deleted.',
-                    ]" :confirmWithText="false" :confirmWithPassword="false"
-                    step1ButtonText="Continue" step2ButtonText="Confirm">
-                    <x-slot:trigger>
-                        <button id="application-mobile-stop-trigger" type="button">Stop</button>
-                    </x-slot:trigger>
-                </x-modal-confirmation>
-                <x-modal-confirmation title="Confirm Application Restart?" buttonTitle="Restart"
-                    submitAction="restart" :actions="[
-                        'This application will be restarted without rebuilding.',
-                    ]" :confirmWithText="false" :confirmWithPassword="false"
-                    step2ButtonText="Confirm">
-                    <x-slot:trigger>
-                        <button id="application-mobile-restart-trigger" type="button">Restart</button>
-                    </x-slot:trigger>
-                </x-modal-confirmation>
+                        </x-split-action>
+                    @endcan
+                @endif
+                <div class="hidden" aria-hidden="true">
+                    <x-modal-confirmation
+                        canGate="deploy" :canResource="$application"
+                        title="{{ str($application->status)->startsWith('exited') ? 'Confirm Container Removal?' : 'Confirm Application Stopping?' }}"
+                        buttonTitle="{{ str($application->status)->startsWith('exited') ? 'Remove container' : 'Stop' }}"
+                        submitAction="stop" :checkboxes="$checkboxes" :actions="[
+                            str($application->status)->startsWith('exited') ? 'The exited application container will be removed.' : 'This application will be stopped.',
+                            str($application->status)->startsWith('exited') ? 'Anonymous volumes may become eligible for Docker cleanup.' : 'All non-persistent data of this application will be deleted.',
+                        ]" :confirmWithText="false" :confirmWithPassword="false"
+                        step1ButtonText="Continue" step2ButtonText="Confirm">
+                        <x-slot:trigger>
+                            <button id="application-mobile-stop-trigger" type="button">Stop</button>
+                        </x-slot:trigger>
+                    </x-modal-confirmation>
+                    <x-modal-confirmation title="Confirm Application Restart?" buttonTitle="Restart"
+                        submitAction="restart" :actions="[
+                            'This application will be restarted without rebuilding.',
+                        ]" :confirmWithText="false" :confirmWithPassword="false"
+                        step2ButtonText="Confirm">
+                        <x-slot:trigger>
+                            <button id="application-mobile-restart-trigger" type="button">Restart</button>
+                        </x-slot:trigger>
+                    </x-modal-confirmation>
+                </div>
             </div>
         </div>
 
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index db005c7635..61aac4158e 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -59,51 +59,54 @@
 
     <div x-data="{ busy: false }" @database-busy.window="busy = true"
         @database-action-finished.window="busy = false">
-        <div class="mb-3 w-full xl:hidden">
-            <div class="flex min-w-0 flex-col items-start gap-2">
-                <h1 class="min-w-0 max-w-full truncate text-[24px]! leading-7! font-semibold! tracking-tight! text-black dark:text-fg">
-                    {{ $database->name }}
-                </h1>
-                <div class="relative flex w-full min-w-0 items-center gap-2">
-                    <x-status-summary :status="$database->status" title="Database status"
-                        :healthcheck-url="route('project.database.healthcheck', $parameters)" />
-                    @if ($isDeploymentProgress)
-                        <x-deploying-indicator label="Working" />
-                    @endif
-                </div>
-                <div class="flex w-full flex-wrap gap-1">
-                    <x-application.restart-limit-warning :application="$database" />
+        {{-- Below xl: the title and the resource actions share one row. --}}
+        <div class="mb-3 flex w-full min-w-0 items-start gap-3 xl:hidden">
+            <div class="min-w-0 flex-1">
+                <div class="flex min-w-0 flex-col items-start gap-2">
+                    <h1 class="min-w-0 max-w-full truncate text-[24px]! leading-7! font-semibold! tracking-tight! text-black dark:text-fg">
+                        {{ $database->name }}
+                    </h1>
+                    <div class="relative flex w-full min-w-0 items-center gap-2">
+                        <x-status-summary :status="$database->status" title="Database status"
+                            :healthcheck-url="route('project.database.healthcheck', $parameters)" />
+                        @if ($isDeploymentProgress)
+                            <x-deploying-indicator label="Working" />
+                        @endif
+                    </div>
+                    <div class="flex w-full flex-wrap gap-1">
+                        <x-application.restart-limit-warning :application="$database" />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="w-full xl:hidden">
-            @if ($database->destination->server->isFunctional())
-                @can('manage', $database)
-                    <x-split-action id="database-mobile-actions" class="mb-3 flex w-full">
-                        @if (! $databaseStatus->startsWith('exited'))
-                            <x-slot:main x-bind:disabled="busy"
-                                @click="document.getElementById('database-restart-trigger')?.click()">
-                                <x-loading-on-button x-show="busy" x-cloak />
-                                <x-reicon name="restart" class="size-3.5" x-show="!busy" />
-                                <span x-text="busy ? 'Restarting…' : 'Restart'">Restart</span>
-                            </x-slot:main>
-                            <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                @click="open = false; document.getElementById('database-stop-trigger')?.click()" role="menuitem">
-                                <x-reicon name="stop-circle" class="size-3.5 text-error" />
-                                Stop
-                            </button>
-                        @else
-                            <x-slot:main x-bind:disabled="busy" @click="busy = true; $wire.dispatch('startEvent')">
-                                <x-loading-on-button x-show="busy" x-cloak />
-                                <x-reicon name="play-circle" class="size-3.5" x-show="!busy" />
-                                <span x-text="busy ? 'Starting…' : 'Start'">Start</span>
-                            </x-slot:main>
-                        @endif
-                    </x-split-action>
-                @endcan
-            @endif
+            <div class="shrink-0">
+                @if ($database->destination->server->isFunctional())
+                    @can('manage', $database)
+                        <x-split-action id="database-mobile-actions">
+                            @if (! $databaseStatus->startsWith('exited'))
+                                <x-slot:main x-bind:disabled="busy"
+                                    @click="document.getElementById('database-restart-trigger')?.click()">
+                                    <x-loading-on-button x-show="busy" x-cloak />
+                                    <x-reicon name="restart" class="size-3.5" x-show="!busy" />
+                                    <span x-text="busy ? 'Restarting…' : 'Restart'">Restart</span>
+                                </x-slot:main>
+                                <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                    @click="open = false; document.getElementById('database-stop-trigger')?.click()" role="menuitem">
+                                    <x-reicon name="stop-circle" class="size-3.5 text-error" />
+                                    Stop
+                                </button>
+                            @else
+                                <x-slot:main x-bind:disabled="busy" @click="busy = true; $wire.dispatch('startEvent')">
+                                    <x-loading-on-button x-show="busy" x-cloak />
+                                    <x-reicon name="play-circle" class="size-3.5" x-show="!busy" />
+                                    <span x-text="busy ? 'Starting…' : 'Start'">Start</span>
+                                </x-slot:main>
+                            @endif
+                        </x-split-action>
+                    @endcan
+                @endif
 
+            </div>
         </div>
 
         @teleport('#resource-action-hud-slot')
diff --git a/resources/views/livewire/project/service/heading.blade.php b/resources/views/livewire/project/service/heading.blade.php
index 2d908a6caf..6d8a21e557 100644
--- a/resources/views/livewire/project/service/heading.blade.php
+++ b/resources/views/livewire/project/service/heading.blade.php
@@ -26,109 +26,112 @@
 
     <div x-data="{ deploying: false }" @service-restarting.window="deploying = true"
         @service-deploy-finished.window="deploying = false">
-        <div class="mb-3 w-full xl:hidden">
-            <div class="flex min-w-0 flex-col items-start gap-2">
-                <h1 class="min-w-0 max-w-full truncate text-[24px]! leading-7! font-semibold! tracking-tight! text-black dark:text-fg">
-                    {{ $service->name }}
-                </h1>
-                <div class="relative flex w-full min-w-0 items-center gap-2">
-                    <x-status-summary :status="$displayStatus" :title="$selectedResource ? 'Resource status' : 'Service status'"
-                        :container-name="$selectedResource ? 'Container' : 'Containers'" />
-                    <x-services.links :service="$service" compact />
-                    @if ($isDeploymentProgress)
-                        <x-deploying-indicator />
-                    @endif
-                </div>
-                <div class="flex w-full flex-wrap gap-1">
-                    @if ($selectedResource)
-                        <x-application.restart-limit-warning :application="$selectedResource" />
-                    @endif
+        {{-- Below xl: the title and the resource actions share one row. --}}
+        <div class="mb-3 flex w-full min-w-0 items-start gap-3 xl:hidden">
+            <div class="min-w-0 flex-1">
+                <div class="flex min-w-0 flex-col items-start gap-2">
+                    <h1 class="min-w-0 max-w-full truncate text-[24px]! leading-7! font-semibold! tracking-tight! text-black dark:text-fg">
+                        {{ $service->name }}
+                    </h1>
+                    <div class="relative flex w-full min-w-0 items-center gap-2">
+                        <x-status-summary :status="$displayStatus" :title="$selectedResource ? 'Resource status' : 'Service status'"
+                            :container-name="$selectedResource ? 'Container' : 'Containers'" />
+                        <x-services.links :service="$service" compact />
+                        @if ($isDeploymentProgress)
+                            <x-deploying-indicator />
+                        @endif
+                    </div>
+                    <div class="flex w-full flex-wrap gap-1">
+                        @if ($selectedResource)
+                            <x-application.restart-limit-warning :application="$selectedResource" />
+                        @endif
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="w-full xl:hidden">
-            @if ($service->isDeployable)
-                @can('deploy', $service)
-                    <x-split-action id="service-mobile-actions" class="mb-3 flex w-full">
-                        @if ($selectedResource && $selectedResource->container_present !== false && $selectedResourceStatus->startsWith('exited'))
-                            <x-slot:main @click="document.getElementById('selected-resource-remove-trigger')?.click()">
-                                <x-reicon name="trash" class="size-3.5" />
-                                Remove container
-                            </x-slot:main>
-                        @elseif ($serviceStatus->contains('running') || $serviceStatus->contains('degraded'))
-                            <x-slot:main x-bind:disabled="deploying"
-                                @click="document.getElementById('service-restart-trigger')?.click()">
-                                <x-loading-on-button x-show="deploying" x-cloak />
-                                <x-reicon name="restart" class="size-3.5" x-show="!deploying" />
-                                <span x-text="deploying ? 'Restarting…' : 'Restart'">Restart</span>
-                            </x-slot:main>
-                            @if ($serviceStatus->contains('running'))
+            <div class="shrink-0">
+                @if ($service->isDeployable)
+                    @can('deploy', $service)
+                        <x-split-action id="service-mobile-actions">
+                            @if ($selectedResource && $selectedResource->container_present !== false && $selectedResourceStatus->startsWith('exited'))
+                                <x-slot:main @click="document.getElementById('selected-resource-remove-trigger')?.click()">
+                                    <x-reicon name="trash" class="size-3.5" />
+                                    Remove container
+                                </x-slot:main>
+                            @elseif ($serviceStatus->contains('running') || $serviceStatus->contains('degraded'))
+                                <x-slot:main x-bind:disabled="deploying"
+                                    @click="document.getElementById('service-restart-trigger')?.click()">
+                                    <x-loading-on-button x-show="deploying" x-cloak />
+                                    <x-reicon name="restart" class="size-3.5" x-show="!deploying" />
+                                    <span x-text="deploying ? 'Restarting…' : 'Restart'">Restart</span>
+                                </x-slot:main>
+                                @if ($serviceStatus->contains('running'))
+                                    <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                        @click="$wire.dispatch('pullAndRestartEvent'); open = false" role="menuitem">
+                                        <x-reicon name="refresh" class="size-3.5 opacity-70" />
+                                        Restart (pull latest)
+                                    </button>
+                                @endif
+                                @if ($serviceStatus->contains('degraded'))
+                                    <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                        @click="$wire.dispatch('forceDeployEvent'); open = false" role="menuitem">
+                                        <x-reicon name="refresh" class="size-3.5 opacity-70" />
+                                        Force Restart
+                                    </button>
+                                @endif
                                 <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                    @click="$wire.dispatch('pullAndRestartEvent'); open = false" role="menuitem">
-                                    <x-reicon name="refresh" class="size-3.5 opacity-70" />
-                                    Restart (pull latest)
+                                    @disabled(!auth()->user()->can('stop', $service))
+                                    @click="open = false; document.getElementById('service-stop-trigger')?.click()" role="menuitem">
+                                    <x-reicon name="stop-circle" class="size-3.5 text-error" />
+                                    Stop
                                 </button>
-                            @endif
-                            @if ($serviceStatus->contains('degraded'))
+                            @else
+                                <x-slot:main x-bind:disabled="deploying" @click="deploying = true; $wire.dispatch('startEvent')">
+                                    <x-loading-on-button x-show="deploying" x-cloak />
+                                    <x-reicon name="play-circle" class="size-3.5" x-show="!deploying" />
+                                    <span x-text="deploying ? 'Deploying…' : 'Deploy'">Deploy</span>
+                                </x-slot:main>
                                 <button type="button" class="listbox-option justify-start! gap-2.5!"
                                     @click="$wire.dispatch('forceDeployEvent'); open = false" role="menuitem">
                                     <x-reicon name="refresh" class="size-3.5 opacity-70" />
-                                    Force Restart
+                                    Force Deploy
+                                </button>
+                                <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                    @disabled(!auth()->user()->can('stop', $service))
+                                    @click="$wire.dispatch('cleanupEvent'); open = false" role="menuitem">
+                                    <x-reicon name="trash" class="size-3.5 opacity-70" />
+                                    Force Cleanup Containers
                                 </button>
                             @endif
-                            <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                @disabled(!auth()->user()->can('stop', $service))
-                                @click="open = false; document.getElementById('service-stop-trigger')?.click()" role="menuitem">
-                                <x-reicon name="stop-circle" class="size-3.5 text-error" />
-                                Stop
+                        </x-split-action>
+                    @endcan
+                @else
+                    @can('deploy', $service)
+                        <div id="service-mobile-actions" class="relative"
+                            x-data="{ open: false }" @click.outside="open = false"
+                            @keydown.escape.window="open = false">
+                            <button type="button" class="button gap-1.5" @click="open = !open"
+                                :aria-expanded="open" aria-haspopup="menu">
+                                <span>Actions</span>
+                                <span class="inline-flex transition-transform" :class="open && 'rotate-180'">
+                                    <x-reicon name="chevron-down" class="size-3 opacity-55" />
+                                </span>
                             </button>
-                        @else
-                            <x-slot:main x-bind:disabled="deploying" @click="deploying = true; $wire.dispatch('startEvent')">
-                                <x-loading-on-button x-show="deploying" x-cloak />
-                                <x-reicon name="play-circle" class="size-3.5" x-show="!deploying" />
-                                <span x-text="deploying ? 'Deploying…' : 'Deploy'">Deploy</span>
-                            </x-slot:main>
-                            <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                @click="$wire.dispatch('forceDeployEvent'); open = false" role="menuitem">
-                                <x-reicon name="refresh" class="size-3.5 opacity-70" />
-                                Force Deploy
-                            </button>
-                            <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                @disabled(!auth()->user()->can('stop', $service))
-                                @click="$wire.dispatch('cleanupEvent'); open = false" role="menuitem">
-                                <x-reicon name="trash" class="size-3.5 opacity-70" />
-                                Force Cleanup Containers
-                            </button>
-                        @endif
-                    </x-split-action>
-                @endcan
-            @else
-                @can('deploy', $service)
-                    <div id="service-mobile-actions" class="relative mb-3"
-                        x-data="{ open: false }" @click.outside="open = false"
-                        @keydown.escape.window="open = false">
-                        <button type="button" class="button w-full justify-between" @click="open = !open"
-                            :aria-expanded="open" aria-haspopup="menu">
-                            <span>Actions</span>
-                            <span class="inline-flex transition-transform" :class="open && 'rotate-180'">
-                                <x-reicon name="chevron-down" class="size-3 opacity-55" />
-                            </span>
-                        </button>
 
-                        <div x-cloak x-show="open" x-transition.origin.top.left
-                            class="listbox-panel top-full! left-0! right-0! mt-1! w-full! min-w-0!" role="menu">
-                            <div class="listbox-option cursor-default! justify-start! gap-2.5! text-neutral-400! dark:text-fg-faint!"
-                                role="menuitem" aria-disabled="true">
-                                <x-reicon name="play-circle" class="size-3.5 opacity-70" />
-                                <span>Deploy (<a href="{{ $environmentVariablesUrl }}" {{ wireNavigate() }}
-                                        class="cursor-pointer underline underline-offset-2">missing required env vars</a>)</span>
+                            <div x-cloak x-show="open" x-transition.origin.top.left
+                                class="listbox-panel right-0! left-auto!" role="menu">
+                                <div class="listbox-option cursor-default! justify-start! gap-2.5! text-neutral-400! dark:text-fg-faint!"
+                                    role="menuitem" aria-disabled="true">
+                                    <x-reicon name="play-circle" class="size-3.5 opacity-70" />
+                                    <span>Deploy (<a href="{{ $environmentVariablesUrl }}" {{ wireNavigate() }}
+                                            class="cursor-pointer underline underline-offset-2">missing required env vars</a>)</span>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                @endcan
-            @endif
+                    @endcan
+                @endif
 
+            </div>
         </div>
 
         @teleport('#resource-action-hud-slot')
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
index 798a4a8eae..ae90f356e8 100644
--- a/resources/views/livewire/project/service/index.blade.php
+++ b/resources/views/livewire/project/service/index.blade.php
@@ -13,7 +13,7 @@
         @elseif (! $embedded)
             <x-main-nav-menu :depth="1" back-label="Service" back-title="Back to the service menu">
                 <nav aria-label="Compose resource settings"
-                    class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
+                    class="grid grid-cols-1 gap-0.5">
                 <a class="menu-item" data-page-only {{ wireNavigate() }}
                     href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
                     <x-reicon name="logout" class="menu-item-icon rotate-180" />
diff --git a/resources/views/livewire/server/navbar.blade.php b/resources/views/livewire/server/navbar.blade.php
index 2aef058129..31626b52ef 100644
--- a/resources/views/livewire/server/navbar.blade.php
+++ b/resources/views/livewire/server/navbar.blade.php
@@ -155,103 +155,106 @@
     @endteleport
 
     <div>
-        {{-- Name lives in the desktop topbar (teleport) from lg up. Below that the
-             mobile topbar has no resource context, so show the H1 through lg. --}}
-        <div class="mb-3 w-full lg:hidden">
-            <div class="flex min-w-0 flex-col gap-2">
-                <h1 data-testid="server-subtitle"
-                    class="min-w-0 truncate text-[24px]! leading-7! font-semibold! tracking-tight! text-black dark:text-fg">
-                    {{ $server->name }}
-                </h1>
-                <div class="flex w-full min-w-0 items-center gap-2">
-                    <x-server.status-summary :server="$server" :proxy-status="$proxyStatus"
-                        :show-sentinel-status="$showSentinelStatus" />
-                    @if ($traefikDashboardAvailable)
-                        <a target="_blank" href="http://{{ formatHostForUrl((string) $serverIp) }}:8080" title="Open Traefik dashboard"
-                            class="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-full border border-neutral-200 bg-neutral-100 px-2 text-xs font-medium leading-none text-neutral-700 dark:border-white/[0.12] dark:bg-white/[0.07] dark:text-white">
-                            <x-reicon name="external-link" class="size-3" />
-                            Traefik
-                        </a>
-                    @endif
+        {{-- Below xl: the title and the resource actions share one row. --}}
+        <div class="mb-3 flex w-full min-w-0 items-start gap-3 xl:hidden">
+            {{-- Name lives in the desktop topbar (teleport) from lg up. Below that the
+                 mobile topbar has no resource context, so show the H1 through lg. --}}
+            <div class="min-w-0 flex-1 lg:hidden">
+                <div class="flex min-w-0 flex-col gap-2">
+                    <h1 data-testid="server-subtitle"
+                        class="min-w-0 truncate text-[24px]! leading-7! font-semibold! tracking-tight! text-black dark:text-fg">
+                        {{ $server->name }}
+                    </h1>
+                    <div class="flex w-full min-w-0 items-center gap-2">
+                        <x-server.status-summary :server="$server" :proxy-status="$proxyStatus"
+                            :show-sentinel-status="$showSentinelStatus" />
+                        @if ($traefikDashboardAvailable)
+                            <a target="_blank" href="http://{{ formatHostForUrl((string) $serverIp) }}:8080" title="Open Traefik dashboard"
+                                class="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-full border border-neutral-200 bg-neutral-100 px-2 text-xs font-medium leading-none text-neutral-700 dark:border-white/[0.12] dark:bg-white/[0.07] dark:text-white">
+                                <x-reicon name="external-link" class="size-3" />
+                                Traefik
+                            </a>
+                        @endif
+                    </div>
                 </div>
             </div>
-        </div>
 
-        {{-- Resource actions stay available below the desktop action HUD. Navigation lives in the sidebar. --}}
-        <div class="w-full xl:hidden">
-            @if ($server->proxySet())
-                @can('manageProxy', $server)
-                    <x-split-action id="server-mobile-actions" class="mb-3 flex w-full">
-                        @if ($proxyCanBeStopped)
-                            <x-slot:main wire:loading.attr="disabled" wire:target="checkProxy,startProxy"
-                                @click="document.getElementById('server-mobile-restart-proxy-trigger')?.click()">
-                                <x-reicon name="restart" class="size-3.5" />
-                                Restart Proxy
-                            </x-slot:main>
-                            <button type="button" class="listbox-option justify-start! gap-2.5!"
-                                @click="open = false; document.getElementById('server-mobile-stop-proxy-trigger')?.click()"
-                                role="menuitem">
-                                <x-reicon name="stop-circle" class="size-3.5 text-error" />
-                                Stop Proxy
-                            </button>
-                        @else
-                            <x-slot:main wire:loading.attr="disabled" wire:target="checkProxy,startProxy" @click="$wire.dispatch('checkProxyEvent')">
-                                <x-reicon name="play-circle" class="size-3.5" />
-                                Start Proxy
-                            </x-slot:main>
-                        @endif
-                        <button type="button" class="listbox-option justify-start! gap-2.5!" wire:click="checkProxyStatus"
-                            wire:loading.attr="disabled" @click="open = false" role="menuitem">
-                            <x-reicon name="refresh" class="size-3.5 opacity-70" />
-                            Refresh Proxy Status
-                        </button>
-                    </x-split-action>
-
-                    {{-- Programmatic open only (clicked from the Actions menu). Keep fully
-                         display:none so the modal shells never reserve a layout row. --}}
-                    <div class="hidden" aria-hidden="true">
-                        <x-modal-confirmation title="Confirm Proxy Restart?" buttonTitle="Restart Proxy"
-                            submitAction="restart" :actions="[
-                                'This proxy will be stopped and started again.',
-                                'All resources hosted on Coolify will be unavailable during the restart.',
-                            ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Proxy"
-                            :dispatchEvent="true" dispatchEventType="restartEvent">
-                            <x-slot:trigger>
-                                <button id="server-mobile-restart-proxy-trigger" type="button">
+            {{-- Resource actions stay available below the desktop action HUD. Navigation lives in the sidebar. --}}
+            <div class="ml-auto shrink-0">
+                @if ($server->proxySet())
+                    @can('manageProxy', $server)
+                        <x-split-action id="server-mobile-actions">
+                            @if ($proxyCanBeStopped)
+                                <x-slot:main wire:loading.attr="disabled" wire:target="checkProxy,startProxy"
+                                    @click="document.getElementById('server-mobile-restart-proxy-trigger')?.click()">
+                                    <x-reicon name="restart" class="size-3.5" />
                                     Restart Proxy
-                                </button>
-                            </x-slot:trigger>
-                        </x-modal-confirmation>
-                        <x-modal-confirmation title="Confirm Proxy Stopping?" buttonTitle="Stop Proxy"
-                            submitAction="stop(true)" :actions="[
-                                'The Coolify proxy will be stopped.',
-                                'All resources hosted on Coolify will be unavailable.',
-                            ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Stop Proxy"
-                            :dispatchEvent="true" dispatchEventType="stopEvent">
-                            <x-slot:trigger>
-                                <button id="server-mobile-stop-proxy-trigger" type="button">
+                                </x-slot:main>
+                                <button type="button" class="listbox-option justify-start! gap-2.5!"
+                                    @click="open = false; document.getElementById('server-mobile-stop-proxy-trigger')?.click()"
+                                    role="menuitem">
+                                    <x-reicon name="stop-circle" class="size-3.5 text-error" />
                                     Stop Proxy
                                 </button>
-                            </x-slot:trigger>
-                        </x-modal-confirmation>
-                    </div>
-                @endcan
-            @endif
+                            @else
+                                <x-slot:main wire:loading.attr="disabled" wire:target="checkProxy,startProxy" @click="$wire.dispatch('checkProxyEvent')">
+                                    <x-reicon name="play-circle" class="size-3.5" />
+                                    Start Proxy
+                                </x-slot:main>
+                            @endif
+                            <button type="button" class="listbox-option justify-start! gap-2.5!" wire:click="checkProxyStatus"
+                                wire:loading.attr="disabled" @click="open = false" role="menuitem">
+                                <x-reicon name="refresh" class="size-3.5 opacity-70" />
+                                Refresh Proxy Status
+                            </button>
+                        </x-split-action>
 
-            <div class="hidden" aria-hidden="true">
-                <x-resource-heading-tabs class="min-w-0 flex-1">
-                    @foreach ($serverMenuItems as $menuItem)
-                        <a @class([
-                            'app-tab shrink-0',
-                            'app-tab-active' => $menuItem['active'],
-                        ])
-                            @if ($menuItem['active']) aria-current="page" @endif
-                            @if ($menuItem['navigate'] ?? true) {{ wireNavigate() }} @endif
-                            href="{{ route($menuItem['route'], $serverRouteParameters) }}">
-                            {{ $menuItem['label'] }}
-                        </a>
-                    @endforeach
-                </x-resource-heading-tabs>
+                        {{-- Programmatic open only (clicked from the Actions menu). Keep fully
+                             display:none so the modal shells never reserve a layout row. --}}
+                        <div class="hidden" aria-hidden="true">
+                            <x-modal-confirmation title="Confirm Proxy Restart?" buttonTitle="Restart Proxy"
+                                submitAction="restart" :actions="[
+                                    'This proxy will be stopped and started again.',
+                                    'All resources hosted on Coolify will be unavailable during the restart.',
+                                ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Proxy"
+                                :dispatchEvent="true" dispatchEventType="restartEvent">
+                                <x-slot:trigger>
+                                    <button id="server-mobile-restart-proxy-trigger" type="button">
+                                        Restart Proxy
+                                    </button>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <x-modal-confirmation title="Confirm Proxy Stopping?" buttonTitle="Stop Proxy"
+                                submitAction="stop(true)" :actions="[
+                                    'The Coolify proxy will be stopped.',
+                                    'All resources hosted on Coolify will be unavailable.',
+                                ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Stop Proxy"
+                                :dispatchEvent="true" dispatchEventType="stopEvent">
+                                <x-slot:trigger>
+                                    <button id="server-mobile-stop-proxy-trigger" type="button">
+                                        Stop Proxy
+                                    </button>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                        </div>
+                    @endcan
+                @endif
+
+                <div class="hidden" aria-hidden="true">
+                    <x-resource-heading-tabs class="min-w-0 flex-1">
+                        @foreach ($serverMenuItems as $menuItem)
+                            <a @class([
+                                'app-tab shrink-0',
+                                'app-tab-active' => $menuItem['active'],
+                            ])
+                                @if ($menuItem['active']) aria-current="page" @endif
+                                @if ($menuItem['navigate'] ?? true) {{ wireNavigate() }} @endif
+                                href="{{ route($menuItem['route'], $serverRouteParameters) }}">
+                                {{ $menuItem['label'] }}
+                            </a>
+                        @endforeach
+                    </x-resource-heading-tabs>
+                </div>
             </div>
         </div>
 
diff --git a/resources/views/livewire/source/github/change.blade.php b/resources/views/livewire/source/github/change.blade.php
index 6a74d5fb0b..8ecb219fcb 100644
--- a/resources/views/livewire/source/github/change.blade.php
+++ b/resources/views/livewire/source/github/change.blade.php
@@ -50,10 +50,10 @@
                     <x-main-nav-menu back-label="Sources" back-title="Back to Integrations"
                         data-settings-search-items="{{ json_encode(settingsSearchItems(['GitHub App' => $settingsMenuItems], $githubAppRouteParameters)) }}">
                         <nav aria-label="GitHub App settings"
-                            class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
+                            class="grid grid-cols-1 gap-0.5">
                             @foreach ($settingsMenuItems as $menuItem)
                                 @if ($menuItem['label'] === 'Danger Zone')
-                                    <div class="col-span-full my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]" aria-hidden="true"></div>
+                                    <div class="col-span-full my-2 border-t border-neutral-200 dark:border-white/[0.06]" aria-hidden="true"></div>
                                 @endif
                                 <a wire:key="github-app-settings-{{ str($menuItem['label'])->slug() }}"
                                     @class([
diff --git a/resources/views/livewire/storage/show.blade.php b/resources/views/livewire/storage/show.blade.php
index aacc03706a..db457cb9e0 100644
--- a/resources/views/livewire/storage/show.blade.php
+++ b/resources/views/livewire/storage/show.blade.php
@@ -39,10 +39,10 @@
                 <x-main-nav-menu back-label="S3 Storage" back-title="Back to Integrations"
                     data-settings-search-items="{{ json_encode(settingsSearchItems(['S3 storage' => $settingsMenuItems], $storageRouteParameters)) }}">
                     <nav aria-label="S3 storage settings"
-                        class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
+                        class="grid grid-cols-1 gap-0.5">
                         @foreach ($settingsMenuItems as $menuItem)
                             @if ($menuItem['label'] === 'Danger Zone')
-                                <div class="col-span-full my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]" aria-hidden="true"></div>
+                                <div class="col-span-full my-2 border-t border-neutral-200 dark:border-white/[0.06]" aria-hidden="true"></div>
                             @endif
                             <a wire:key="storage-settings-{{ str($menuItem['label'])->slug() }}"
                                 @class([
diff --git a/tests/Feature/BreadcrumbsVisibilityTest.php b/tests/Feature/BreadcrumbsVisibilityTest.php
index c9b12d7777..d29993f2b1 100644
--- a/tests/Feature/BreadcrumbsVisibilityTest.php
+++ b/tests/Feature/BreadcrumbsVisibilityTest.php
@@ -55,14 +55,13 @@ it('hides the breadcrumb trail on mobile while keeping the current status visibl
     $response->assertSee('title="Switch resource"', false);
 
     // Desktop resource actions dock into the top bar; the slot is hidden below xl.
-    $response->assertSee('<div id="resource-action-hud-slot" class="hidden shrink-0 items-center xl:flex"></div>', false);
+    $response->assertSee('<div id="resource-action-hud-slot" x-ref="resourceActions" class="hidden shrink-0 items-center xl:flex"></div>', false);
 
-    // Below xl, the heading keeps the resource name, current status, and a split action visible.
+    // Below xl, the heading keeps the resource name, current status, and a split action in one row.
     expect(preg_match(
-        '/<div class="mb-3 w-full xl:hidden">.*?<h1[^>]*>\s*Pure Dockerfile Example\s*<\/h1>.*?Application status/s',
+        '/<div class="mb-3 flex w-full min-w-0 items-start gap-3 xl:hidden">.*?<h1[^>]*>\s*Pure Dockerfile Example\s*<\/h1>.*?Application status.*?id="application-mobile-actions"/s',
         $response->getContent()
     ))->toBe(1);
-    $response->assertSee('id="application-mobile-actions"', false);
     $response->assertSee('Running');
 
     expect($response->getContent())->not->toContain('hidden pt-2 pb-10 md:flex');