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');