From 442ed9816990861c6bebf06c5535a77161c1d2aa Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:09:26 +0200
Subject: [PATCH] feat(project): add mobile action controls for resources

Show restart, stop, redeploy, and update actions directly in the mobile
headers for applications, databases, and services, with coverage for the
mobile resource menu behavior.
---
 .../project/application/heading.blade.php     | 155 ++++++++----
 .../project/database/heading.blade.php        |  69 ++++--
 .../project/service/heading.blade.php         | 228 +++++++++++++-----
 tests/Feature/MobileResourceMenuTest.php      |  66 +++++
 4 files changed, 387 insertions(+), 131 deletions(-)

diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index fd37d869a..18e2e6db0 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -166,7 +166,113 @@
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
     <div class="navbar-main">
         <div class="w-full md:hidden">
-            <label for="application-mobile-section" class="sr-only">Application menu</label>
+            @if (!($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)))
+                <div id="application-mobile-actions" class="mt-2 mb-3 md:hidden">
+                    <div class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Actions</div>
+                    <div class="flex flex-nowrap items-center gap-2 overflow-x-auto">
+                    @if (!str($application->status)->startsWith('exited'))
+                        @if (!$application->destination->server->isSwarm())
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-orange-400"
+                                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                                    stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                    <path
+                                        d="M10.09 4.01l.496 -.495a2 2 0 0 1 2.828 0l7.071 7.07a2 2 0 0 1 0 2.83l-7.07 7.07a2 2 0 0 1 -2.83 0l-7.07 -7.07a2 2 0 0 1 0 -2.83l3.535 -3.535h-3.988">
+                                    </path>
+                                    <path d="M7.05 11.038v-3.988"></path>
+                                </svg>
+                                Redeploy
+                            </button>
+                        @endif
+                        @if ($application->build_pack !== 'dockercompose')
+                            @if ($application->destination->server->isSwarm())
+                                <button type="button" class="button shrink-0"
+                                    @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                                    <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <g fill="none" stroke="currentColor" stroke-linecap="round"
+                                            stroke-linejoin="round" stroke-width="2">
+                                            <path
+                                                d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                            <path d="M20 4v5h-5" />
+                                        </g>
+                                    </svg>
+                                    Update Service
+                                </button>
+                            @else
+                                <button type="button" class="button shrink-0"
+                                    @click="document.getElementById('application-mobile-restart-trigger')?.click()">
+                                    <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <g fill="none" stroke="currentColor" stroke-linecap="round"
+                                            stroke-linejoin="round" stroke-width="2">
+                                            <path
+                                                d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                            <path d="M20 4v5h-5" />
+                                        </g>
+                                    </svg>
+                                    Restart
+                                </button>
+                            @endif
+                        @endif
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('application-mobile-stop-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path
+                                    d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Stop
+                        </x-forms.button>
+                    @else
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
+                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>
+                            Deploy
+                        </button>
+                    @endif
+                    @if (!$application->destination->server->isSwarm())
+                        @if ($application->status === 'running')
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-force-deploy-trigger')?.click()">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
+                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+                                    stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                    <path d="M7 4v16l13 -8z" />
+                                </svg>
+                                Force deploy (without cache)
+                            </button>
+                        @else
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-deploy-force-trigger')?.click()">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
+                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+                                    stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                    <path d="M7 4v16l13 -8z" />
+                                </svg>
+                                Force deploy (without cache)
+                            </button>
+                        @endif
+                    @endif
+                    </div>
+                </div>
+            @endif
+            <label id="application-mobile-section-label" for="application-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
             <select id="application-mobile-section" class="select w-full" aria-label="Application menu"
                 data-current-value="{{ $activeMobileMenuValue }}"
                 x-data="{
@@ -283,53 +389,6 @@
                     @endif
                 </optgroup>
             </select>
-            @if (!($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)))
-                <div id="application-mobile-actions" class="mt-2 flex flex-nowrap items-center gap-2 overflow-x-auto md:hidden">
-                    @if (!str($application->status)->startsWith('exited'))
-                        @if (!$application->destination->server->isSwarm())
-                            <button type="button" class="button shrink-0"
-                                @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
-                                Redeploy
-                            </button>
-                        @endif
-                        @if ($application->build_pack !== 'dockercompose')
-                            @if ($application->destination->server->isSwarm())
-                                <button type="button" class="button shrink-0"
-                                    @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
-                                    Update Service
-                                </button>
-                            @else
-                                <button type="button" class="button shrink-0"
-                                    @click="document.getElementById('application-mobile-restart-trigger')?.click()">
-                                    Restart
-                                </button>
-                            @endif
-                        @endif
-                        <button type="button" class="button shrink-0 text-error"
-                            @click="document.getElementById('application-mobile-stop-trigger')?.click()">
-                            Stop
-                        </button>
-                    @else
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
-                            Deploy
-                        </button>
-                    @endif
-                    @if (!$application->destination->server->isSwarm())
-                        @if ($application->status === 'running')
-                            <button type="button" class="button shrink-0"
-                                @click="document.getElementById('application-mobile-force-deploy-trigger')?.click()">
-                                Force deploy (without cache)
-                            </button>
-                        @else
-                            <button type="button" class="button shrink-0"
-                                @click="document.getElementById('application-mobile-deploy-force-trigger')?.click()">
-                                Force deploy (without cache)
-                            </button>
-                        @endif
-                    @endif
-                </div>
-            @endif
             <x-modal-confirmation title="Confirm Application Stopping?" buttonTitle="Stop"
                 submitAction="stop" :checkboxes="$checkboxes" :actions="[
                     'This application will be stopped.',
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 67ace7c32..61670cc72 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -73,14 +73,60 @@
     <x-slide-over @startdatabase.window="slideOverOpen = true" closeWithX fullScreen>
         <x-slot:title>Database Startup</x-slot:title>
         <x-slot:content>
-            <div wire:ignore>
+            <div wire:ignore class="h-full min-h-0 min-w-0 max-w-full">
                 <livewire:activity-monitor header="Logs" fullHeight />
             </div>
         </x-slot:content>
     </x-slide-over>
     <div class="navbar-main">
         <div class="w-full md:hidden">
-            <label for="database-mobile-section" class="sr-only">Database menu</label>
+            @if ($database->destination->server->isFunctional())
+                <div id="database-mobile-actions" class="mt-2 mb-3 md:hidden">
+                    <div class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Actions</div>
+                    <div class="flex flex-nowrap items-center gap-2 overflow-x-auto">
+                    @if (!str($database->status)->startsWith('exited'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('database-restart-trigger')?.click()">
+                            <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
+                                    <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                    <path d="M20 4v5h-5" />
+                                </g>
+                            </svg>
+                            Restart
+                        </button>
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('database-stop-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Stop
+                        </x-forms.button>
+                    @else
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('database-start-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>
+                            Start
+                        </button>
+                    @endif
+                    </div>
+                </div>
+            @endif
+            <label id="database-mobile-section-label" for="database-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
             <select id="database-mobile-section" class="select w-full" aria-label="Database menu"
                 data-current-value="{{ $activeDatabaseMobileValue }}"
                 x-data="{
@@ -136,25 +182,6 @@
                     @endforeach
                 </optgroup>
             </select>
-            @if ($database->destination->server->isFunctional())
-                <div id="database-mobile-actions" class="mt-2 flex flex-nowrap items-center gap-2 overflow-x-auto md:hidden">
-                    @if (!str($database->status)->startsWith('exited'))
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('database-restart-trigger')?.click()">
-                            Restart
-                        </button>
-                        <button type="button" class="button shrink-0 text-error"
-                            @click="document.getElementById('database-stop-trigger')?.click()">
-                            Stop
-                        </button>
-                    @else
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('database-start-trigger')?.click()">
-                            Start
-                        </button>
-                    @endif
-                </div>
-            @endif
         </div>
         <nav
             class="scrollbar hidden min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:flex md:w-auto md:overflow-visible">
diff --git a/resources/views/livewire/project/service/heading.blade.php b/resources/views/livewire/project/service/heading.blade.php
index 4e8f3cc4a..1071bd658 100644
--- a/resources/views/livewire/project/service/heading.blade.php
+++ b/resources/views/livewire/project/service/heading.blade.php
@@ -100,7 +100,172 @@
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data">
         <div class="mb-4 w-full md:mb-0 md:hidden">
-            <label for="service-mobile-section" class="sr-only">Service menu</label>
+            @if ($service->isDeployable)
+                <div id="service-mobile-actions" class="mt-2 mb-3 md:hidden">
+                    <div class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Actions</div>
+                    <div class="flex flex-nowrap items-center gap-2 overflow-x-auto">
+                    @if (str($service->status)->contains('running'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-restart-trigger')?.click()">
+                            <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
+                                    <path d="M19.933 13.041 a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                    <path d="M20 4v5h-5" />
+                                </g>
+                            </svg>
+                            Restart
+                        </button>
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Stop
+                        </x-forms.button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-pullAndRestart-trigger')?.click()">
+                            <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
+                                    <path d="M19.933 13.041 a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                    <path d="M20 4v5h-5" />
+                                </g>
+                            </svg>
+                            Pull Latest Images & Restart
+                        </button>
+                    @elseif (str($service->status)->contains('degraded'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-restart-trigger')?.click()">
+                            <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
+                                    <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                    <path d="M20 4v5h-5" />
+                                </g>
+                            </svg>
+                            Restart
+                        </button>
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Stop
+                        </x-forms.button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>
+                            Force Restart
+                        </button>
+                    @elseif (str($service->status)->contains('exited'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-start-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>
+                            Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>
+                            Force Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-cleanup-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Force Cleanup Containers
+                        </button>
+                    @else
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Stop
+                        </x-forms.button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-start-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>
+                            Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>
+                            Force Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-cleanup-trigger')?.click()">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Force Cleanup Containers
+                        </button>
+                    @endif
+                    </div>
+                </div>
+            @endif
+            <label id="service-mobile-section-label" for="service-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
             <select id="service-mobile-section" class="select w-full" aria-label="Service menu"
                 data-current-value="{{ $activeServiceMobileValue }}"
                 x-data="{
@@ -177,67 +342,6 @@
                     @endforelse
                 </optgroup>
             </select>
-            @if ($service->isDeployable)
-                <div id="service-mobile-actions" class="mt-2 flex flex-nowrap items-center gap-2 overflow-x-auto md:hidden">
-                    @if (str($service->status)->contains('running'))
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-restart-trigger')?.click()">
-                            Restart
-                        </button>
-                        <button type="button" class="button shrink-0 text-error"
-                            @click="document.getElementById('service-stop-trigger')?.click()">
-                            Stop
-                        </button>
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-pullAndRestart-trigger')?.click()">
-                            Pull Latest Images & Restart
-                        </button>
-                    @elseif (str($service->status)->contains('degraded'))
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-restart-trigger')?.click()">
-                            Restart
-                        </button>
-                        <button type="button" class="button shrink-0 text-error"
-                            @click="document.getElementById('service-stop-trigger')?.click()">
-                            Stop
-                        </button>
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
-                            Force Restart
-                        </button>
-                    @elseif (str($service->status)->contains('exited'))
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-start-trigger')?.click()">
-                            Deploy
-                        </button>
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
-                            Force Deploy
-                        </button>
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-cleanup-trigger')?.click()">
-                            Force Cleanup Containers
-                        </button>
-                    @else
-                        <button type="button" class="button shrink-0 text-error"
-                            @click="document.getElementById('service-stop-trigger')?.click()">
-                            Stop
-                        </button>
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-start-trigger')?.click()">
-                            Deploy
-                        </button>
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
-                            Force Deploy
-                        </button>
-                        <button type="button" class="button shrink-0"
-                            @click="document.getElementById('service-cleanup-trigger')?.click()">
-                            Force Cleanup Containers
-                        </button>
-                    @endif
-                </div>
-            @endif
         </div>
         <nav
             class="scrollbar hidden min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:flex md:w-auto md:overflow-visible">
diff --git a/tests/Feature/MobileResourceMenuTest.php b/tests/Feature/MobileResourceMenuTest.php
index dede5b9e5..647972ec0 100644
--- a/tests/Feature/MobileResourceMenuTest.php
+++ b/tests/Feature/MobileResourceMenuTest.php
@@ -4,6 +4,13 @@
     $applicationHeading = file_get_contents(resource_path('views/livewire/project/application/heading.blade.php'));
     $databaseHeading = file_get_contents(resource_path('views/livewire/project/database/heading.blade.php'));
     $serviceHeading = file_get_contents(resource_path('views/livewire/project/service/heading.blade.php'));
+    $applicationMobileActions = mobileActionsMarkup($applicationHeading, 'application-mobile-actions', 'application-mobile-section');
+    $databaseMobileActions = mobileActionsMarkup($databaseHeading, 'database-mobile-actions', 'database-mobile-section');
+    $serviceMobileActions = mobileActionsMarkup($serviceHeading, 'service-mobile-actions', 'service-mobile-section');
+
+    expect(mobileActionsAreBeforeSelect($applicationHeading, 'application-mobile-actions', 'application-mobile-section'))->toBeTrue();
+    expect(mobileActionsAreBeforeSelect($databaseHeading, 'database-mobile-actions', 'database-mobile-section'))->toBeTrue();
+    expect(mobileActionsAreBeforeSelect($serviceHeading, 'service-mobile-actions', 'service-mobile-section'))->toBeTrue();
 
     expect($applicationHeading)
         ->toContain('application-mobile-actions')
@@ -17,6 +24,19 @@
         ->toContain('application-mobile-force-deploy-trigger')
         ->not->toContain('<optgroup label="Actions">');
 
+    expect($applicationMobileActions)
+        ->toContain('mb-3')
+        ->toContain('Actions')
+        ->toContain('<x-forms.button isError class="shrink-0"')
+        ->not->toContain('button type="button" class="button shrink-0 text-error"')
+        ->toContain('M7 4v16l13 -8z')
+        ->toContain('M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747')
+        ->toContain('M6 5m0 1a1 1 0 0 1 1 -1h2');
+
+    expect($applicationHeading)
+        ->toContain('application-mobile-section-label')
+        ->toContain('Section');
+
     expect($databaseHeading)
         ->toContain('database-mobile-section')
         ->toContain('database-mobile-actions')
@@ -37,6 +57,19 @@
         ->not->toContain('<optgroup label="Actions">')
         ->not->toContain('@selected');
 
+    expect($databaseMobileActions)
+        ->toContain('mb-3')
+        ->toContain('Actions')
+        ->toContain('<x-forms.button isError class="shrink-0"')
+        ->not->toContain('button type="button" class="button shrink-0 text-error"')
+        ->toContain('M7 4v16l13 -8z')
+        ->toContain('M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747')
+        ->toContain('M6 5m0 1a1 1 0 0 1 1 -1h2');
+
+    expect($databaseHeading)
+        ->toContain('database-mobile-section-label')
+        ->toContain('Section');
+
     expect($serviceHeading)
         ->toContain('service-mobile-section')
         ->toContain('service-mobile-actions')
@@ -63,8 +96,41 @@
         ->not->toContain('<optgroup label="Actions">')
         ->not->toContain('order-first flex flex-wrap items-center gap-2 sm:order-last')
         ->not->toContain('@selected');
+
+    expect($serviceMobileActions)
+        ->toContain('mb-3')
+        ->toContain('Actions')
+        ->toContain('<x-forms.button isError class="shrink-0"')
+        ->not->toContain('button type="button" class="button shrink-0 text-error"')
+        ->toContain('M7 4v16l13 -8z')
+        ->toContain('M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747')
+        ->toContain('M6 5m0 1a1 1 0 0 1 1 -1h2');
+
+    expect($serviceHeading)
+        ->toContain('service-mobile-section-label')
+        ->toContain('Section');
 });
 
+function mobileActionsMarkup(string $heading, string $actionsId, string $selectId): string
+{
+    $actionsPosition = strpos($heading, 'id="'.$actionsId.'"');
+    $selectPosition = strpos($heading, 'id="'.$selectId.'"');
+
+    if ($actionsPosition === false || $selectPosition === false || $actionsPosition > $selectPosition) {
+        return '';
+    }
+
+    return substr($heading, $actionsPosition, $selectPosition - $actionsPosition);
+}
+
+function mobileActionsAreBeforeSelect(string $heading, string $actionsId, string $selectId): bool
+{
+    $actionsPosition = strpos($heading, 'id="'.$actionsId.'"');
+    $selectPosition = strpos($heading, 'id="'.$selectId.'"');
+
+    return $actionsPosition !== false && $selectPosition !== false && $actionsPosition < $selectPosition;
+}
+
 it('keeps configuration sidebars hidden until desktop breakpoint', function () {
     expect(file_get_contents(resource_path('views/livewire/project/database/configuration.blade.php')))
         ->toContain('sub-menu-wrapper hidden md:flex');