From 0d8a95473a89759fc29165674d4fb66df98957b5 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 9 Apr 2026 19:51:31 +0200
Subject: [PATCH] fix(ui): improve responsive project headings and controls

Refine mobile layout for project resource pages by making breadcrumbs and status blocks responsive, improving dropdown and checkbox touch behavior, and adding support for custom modal triggers. Add feature tests covering breadcrumb visibility and responsive checkbox layout.
---
 resources/css/utilities.css                   |   4 +
 resources/views/components/dropdown.blade.php |  49 +++-
 .../views/components/forms/checkbox.blade.php |  12 +-
 .../components/modal-confirmation.blade.php   |   6 +-
 .../resources/breadcrumbs.blade.php           |  63 ++--
 .../views/components/status/index.blade.php   |  66 ++---
 .../components/status/services.blade.php      |  56 ++--
 .../livewire/notifications/email.blade.php    |   2 +-
 .../livewire/notifications/telegram.blade.php |  28 +-
 .../project/application/general.blade.php     |  10 +-
 .../project/application/heading.blade.php     | 227 +++++++++------
 .../project/database/heading.blade.php        | 148 ++++++----
 .../project/service/file-storage.blade.php    |   8 +-
 .../project/service/heading.blade.php         | 272 +++++++++++-------
 .../livewire/project/service/index.blade.php  |   2 +-
 .../project/service/stack-form.blade.php      |   4 +-
 .../project/shared/storages/show.blade.php    |   4 +-
 .../views/livewire/server/proxy.blade.php     |   2 +-
 .../views/livewire/server/sentinel.blade.php  |   2 +-
 .../views/livewire/server/show.blade.php      |   2 +-
 .../livewire/source/github/change.blade.php   |   2 +-
 tests/Feature/BreadcrumbsVisibilityTest.php   |  71 +++++
 .../Feature/ResponsiveCheckboxLayoutTest.php  | 113 ++++++++
 23 files changed, 791 insertions(+), 362 deletions(-)
 create mode 100644 tests/Feature/BreadcrumbsVisibilityTest.php
 create mode 100644 tests/Feature/ResponsiveCheckboxLayoutTest.php

diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index 02be0c0c4..a8e807041 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -145,6 +145,10 @@ @utility dropdown-item {
     @apply flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
 }
 
+@utility dropdown-item-touch {
+    @apply min-h-10 px-3 py-2 text-sm;
+}
+
 @utility dropdown-item-no-padding {
     @apply flex relative gap-2 justify-start items-center py-1 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
 }
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
index 666b93dbc..2bb917f79 100644
--- a/resources/views/components/dropdown.blade.php
+++ b/resources/views/components/dropdown.blade.php
@@ -1,7 +1,44 @@
 <div x-data="{
-    dropdownOpen: false
-}" class="relative" @click.outside="dropdownOpen = false">
-    <button @click="dropdownOpen=true"
+    dropdownOpen: false,
+    panelStyles: '',
+    open() {
+        this.dropdownOpen = true;
+        this.updatePanelPosition();
+    },
+    close() {
+        this.dropdownOpen = false;
+    },
+    updatePanelPosition() {
+        if (window.innerWidth >= 768) {
+            this.panelStyles = '';
+
+            return;
+        }
+
+        this.$nextTick(() => {
+            const triggerRect = this.$refs.trigger.getBoundingClientRect();
+            const panelRect = this.$refs.panel.getBoundingClientRect();
+            const viewportPadding = 8;
+            let left = triggerRect.left;
+
+            if ((left + panelRect.width + viewportPadding) > window.innerWidth) {
+                left = window.innerWidth - panelRect.width - viewportPadding;
+            }
+
+            left = Math.max(viewportPadding, left);
+
+            let top = triggerRect.bottom + 4;
+            const maxTop = window.innerHeight - panelRect.height - viewportPadding;
+
+            if (top > maxTop) {
+                top = Math.max(viewportPadding, triggerRect.top - panelRect.height - viewportPadding);
+            }
+
+            this.panelStyles = `position: fixed; left: ${left}px; top: ${top}px;`;
+        });
+    }
+}" class="relative" @click.outside="close()" x-on:resize.window="if (dropdownOpen) updatePanelPosition()">
+    <button x-ref="trigger" @click="dropdownOpen ? close() : open()"
         class="inline-flex items-center justify-start pr-8 transition-colors focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
         <span class="flex flex-col items-start h-full leading-none">
             {{ $title }}
@@ -13,11 +50,11 @@ class="inline-flex items-center justify-start pr-8 transition-colors focus:outli
         </svg>
     </button>
 
-    <div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
+    <div x-ref="panel" x-show="dropdownOpen" @click.away="close()" x-transition:enter="ease-out duration-200"
         x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
-        class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
+        :style="panelStyles" class="absolute top-full z-50 mt-1 min-w-max max-w-[calc(100vw-1rem)] md:top-0 md:mt-6" x-cloak>
         <div
-            class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
+            class="border border-neutral-300 bg-white p-1 shadow-sm dark:border-coolgray-300 dark:bg-coolgray-200">
             {{ $slot }}
         </div>
     </div>
diff --git a/resources/views/components/forms/checkbox.blade.php b/resources/views/components/forms/checkbox.blade.php
index b291759a8..29717b9b8 100644
--- a/resources/views/components/forms/checkbox.blade.php
+++ b/resources/views/components/forms/checkbox.blade.php
@@ -11,12 +11,12 @@
 ])
 
 <div @class([
-    'flex flex-row items-center gap-4 pr-2 py-1 form-control min-w-fit',
+    'form-control flex max-w-full flex-row items-center gap-4 py-1 pr-2',
     'w-full' => $fullWidth,
     'dark:hover:bg-coolgray-100 cursor-pointer' => !$disabled,
 ])>
-    <label @class(['flex gap-4 items-center px-0 min-w-fit label w-full'])>
-        <span class="flex grow gap-2">
+    <label @class(['label flex w-full max-w-full min-w-0 items-center gap-4 px-0'])>
+        <span class="flex min-w-0 grow gap-2 break-words">
             @if ($label)
                 @if ($disabled)
                     <span class="opacity-60">{!! $label !!}</span>
@@ -29,16 +29,16 @@
             @endif
         </span>
         @if ($instantSave)
-            <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
+            <input type="checkbox" @disabled($disabled) {{ $attributes->class([$defaultClass, 'shrink-0']) }}
                 wire:loading.attr="disabled"
                 wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}'
                 wire:model={{ $modelBinding }} id="{{ $htmlId }}" @if ($checked) checked @endif />
         @else
             @if ($domValue)
-                <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
+                <input type="checkbox" @disabled($disabled) {{ $attributes->class([$defaultClass, 'shrink-0']) }}
                     value={{ $domValue }} id="{{ $htmlId }}" @if ($checked) checked @endif />
             @else
-                <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
+                <input type="checkbox" @disabled($disabled) {{ $attributes->class([$defaultClass, 'shrink-0']) }}
                     wire:model={{ $value ?? $modelBinding }} id="{{ $htmlId }}" @if ($checked) checked @endif />
             @endif
         @endif
diff --git a/resources/views/components/modal-confirmation.blade.php b/resources/views/components/modal-confirmation.blade.php
index c1e8a3e54..b1d7ac475 100644
--- a/resources/views/components/modal-confirmation.blade.php
+++ b/resources/views/components/modal-confirmation.blade.php
@@ -129,7 +129,11 @@
 }"
     @keydown.escape.window="if (modalOpen) { modalOpen = false; resetModal(); }" :class="{ 'z-40': modalOpen }"
     class="relative w-auto h-auto">
-    @if ($customButton)
+    @if (isset($trigger))
+        <div @click="modalOpen=true">
+            {{ $trigger }}
+        </div>
+    @elseif ($customButton)
         @if ($buttonFullWidth)
             <x-forms.button @click="modalOpen=true" class="w-full">
                 {{ $customButton }}
diff --git a/resources/views/components/resources/breadcrumbs.blade.php b/resources/views/components/resources/breadcrumbs.blade.php
index 300a8d6e2..975a1bf4b 100644
--- a/resources/views/components/resources/breadcrumbs.blade.php
+++ b/resources/views/components/resources/breadcrumbs.blade.php
@@ -29,9 +29,47 @@
     $currentProjectUuid = data_get($resource, 'environment.project.uuid');
     $currentEnvironmentUuid = data_get($resource, 'environment.uuid');
     $currentResourceUuid = data_get($resource, 'uuid');
+    $resourceUuid = data_get($resource, 'uuid');
+    $resourceType = $resource->getMorphClass();
+    $isApplication = $resourceType === 'App\Models\Application';
+    $isService = $resourceType === 'App\Models\Service';
+    $isDatabase = str_contains($resourceType, 'Database') || str_contains($resourceType, 'Standalone');
+    $hasMultipleServers = $isApplication && method_exists($resource, 'additional_servers') &&
+        ($resource->relationLoaded('additional_servers') ? $resource->additional_servers->count() > 0 : ($resource->additional_servers_count ?? 0) > 0);
+    $serverName = $hasMultipleServers ? null : data_get($resource, 'destination.server.name');
+    $routeParams = [
+        'project_uuid' => $currentProjectUuid,
+        'environment_uuid' => $currentEnvironmentUuid,
+    ];
+    if ($isApplication) {
+        $routeParams['application_uuid'] = $resourceUuid;
+    } elseif ($isService) {
+        $routeParams['service_uuid'] = $resourceUuid;
+    } else {
+        $routeParams['database_uuid'] = $resourceUuid;
+    }
 @endphp
-<nav class="flex pt-2 pb-10">
-    <ol class="flex flex-wrap items-center gap-y-1">
+<nav class="pt-2 pb-4 md:pb-10">
+    <div class="flex min-w-0 flex-col gap-1 md:hidden">
+        <div class="flex min-w-0 items-center text-xs text-neutral-400">
+            <a class="min-w-0 truncate text-neutral-300 hover:text-warning" {{ wireNavigate() }}
+                href="{{ $isApplication
+                    ? route('project.application.configuration', $routeParams)
+                    : ($isService
+                        ? route('project.service.configuration', $routeParams)
+                        : route('project.database.configuration', $routeParams)) }}"
+                title="{{ data_get($resource, 'name') }}{{ $serverName ? ' ('.$serverName.')' : '' }}">
+                {{ data_get($resource, 'name') }}
+            </a>
+        </div>
+        @if ($resource->getMorphClass() == 'App\Models\Service')
+            <x-status.services :service="$resource" />
+        @else
+            <x-status.index :resource="$resource" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
+        @endif
+    </div>
+
+    <ol class="hidden flex-wrap items-center gap-y-1 md:flex">
         <!-- Project Level -->
         <li class="inline-flex items-center" x-data="{ projectOpen: false, closeTimeout: null, toggle() { this.projectOpen = !this.projectOpen }, open() { clearTimeout(this.closeTimeout); this.projectOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.projectOpen = false }, 100) } }">
             <div class="flex items-center relative" @mouseenter="open()" @mouseleave="close()">
@@ -204,27 +242,6 @@ class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolg
         </li>
 
         <!-- Resource Level -->
-        @php
-            $resourceUuid = data_get($resource, 'uuid');
-            $resourceType = $resource->getMorphClass();
-            $isApplication = $resourceType === 'App\Models\Application';
-            $isService = $resourceType === 'App\Models\Service';
-            $isDatabase = str_contains($resourceType, 'Database') || str_contains($resourceType, 'Standalone');
-            $hasMultipleServers = $isApplication && method_exists($resource, 'additional_servers') &&
-                ($resource->relationLoaded('additional_servers') ? $resource->additional_servers->count() > 0 : ($resource->additional_servers_count ?? 0) > 0);
-            $serverName = $hasMultipleServers ? null : data_get($resource, 'destination.server.name');
-            $routeParams = [
-                'project_uuid' => $currentProjectUuid,
-                'environment_uuid' => $currentEnvironmentUuid,
-            ];
-            if ($isApplication) {
-                $routeParams['application_uuid'] = $resourceUuid;
-            } elseif ($isService) {
-                $routeParams['service_uuid'] = $resourceUuid;
-            } else {
-                $routeParams['database_uuid'] = $resourceUuid;
-            }
-        @endphp
         <li class="inline-flex items-center mr-2">
             <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
                 href="{{ $isApplication
diff --git a/resources/views/components/status/index.blade.php b/resources/views/components/status/index.blade.php
index f0a7876ce..8d959ce6e 100644
--- a/resources/views/components/status/index.blade.php
+++ b/resources/views/components/status/index.blade.php
@@ -3,35 +3,37 @@
     'lastDeploymentLink' => null,
     'resource' => null,
 ])
-@if (str($resource->status)->startsWith('running'))
-    <x-status.running :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
-@elseif(str($resource->status)->startsWith('degraded'))
-    <x-status.degraded :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
-@elseif(str($resource->status)->startsWith('restarting') || str($resource->status)->startsWith('starting'))
-    <x-status.restarting :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
-@else
-    <x-status.stopped :status="$resource->status" />
-@endif
-@if (isset($resource->restart_count) && $resource->restart_count > 0 && !str($resource->status)->startsWith('exited'))
-    <div class="flex items-center pl-2">
-        <span class="text-xs dark:text-warning" title="Container has restarted {{ $resource->restart_count }} time{{ $resource->restart_count > 1 ? 's' : '' }}. Last restart: {{ $resource->last_restart_at?->diffForHumans() }}">
-            ({{ $resource->restart_count }}x restarts)
-        </span>
-    </div>
-@endif
-@if (!str($resource->status)->contains('exited') && $showRefreshButton)
-    <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
-        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
-        <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
-        </svg>
-    </button>
-    <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
-        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
-        <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
-        </svg>
-    </button>
-@endif
+<div class="flex flex-wrap items-center gap-1">
+    @if (str($resource->status)->startsWith('running'))
+        <x-status.running :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
+    @elseif(str($resource->status)->startsWith('degraded'))
+        <x-status.degraded :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
+    @elseif(str($resource->status)->startsWith('restarting') || str($resource->status)->startsWith('starting'))
+        <x-status.restarting :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
+    @else
+        <x-status.stopped :status="$resource->status" />
+    @endif
+    @if (isset($resource->restart_count) && $resource->restart_count > 0 && !str($resource->status)->startsWith('exited'))
+        <div class="flex items-center">
+            <span class="text-xs dark:text-warning" title="Container has restarted {{ $resource->restart_count }} time{{ $resource->restart_count > 1 ? 's' : '' }}. Last restart: {{ $resource->last_restart_at?->diffForHumans() }}">
+                ({{ $resource->restart_count }}x restarts)
+            </span>
+        </div>
+    @endif
+    @if (!str($resource->status)->contains('exited') && $showRefreshButton)
+        <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
+            class="dark:hover:fill-white fill-black dark:fill-warning">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+            </svg>
+        </button>
+        <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
+            class="dark:hover:fill-white fill-black dark:fill-warning">
+            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+            </svg>
+        </button>
+    @endif
+</div>
diff --git a/resources/views/components/status/services.blade.php b/resources/views/components/status/services.blade.php
index 9c7a870c7..ff1862c73 100644
--- a/resources/views/components/status/services.blade.php
+++ b/resources/views/components/status/services.blade.php
@@ -1,30 +1,32 @@
 @php
     $displayStatus = formatContainerStatus($complexStatus);
 @endphp
-@if (str($displayStatus)->lower()->contains('running'))
-    <x-status.running :status="$displayStatus" />
-@elseif(str($displayStatus)->lower()->contains('starting'))
-    <x-status.restarting :status="$displayStatus" />
-@elseif(str($displayStatus)->lower()->contains('restarting'))
-    <x-status.restarting :status="$displayStatus" />
-@elseif(str($displayStatus)->lower()->contains('degraded'))
-    <x-status.degraded :status="$displayStatus" />
-@else
-    <x-status.stopped :status="$displayStatus" />
-@endif
-@if (!str($complexStatus)->contains('exited') && $showRefreshButton)
-    <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
-        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
-        <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
-        </svg>
-    </button>
-    <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
-        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
-        <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
-        </svg>
-    </button>
-@endif
+<div class="flex flex-wrap items-center gap-1">
+    @if (str($displayStatus)->lower()->contains('running'))
+        <x-status.running :status="$displayStatus" />
+    @elseif(str($displayStatus)->lower()->contains('starting'))
+        <x-status.restarting :status="$displayStatus" />
+    @elseif(str($displayStatus)->lower()->contains('restarting'))
+        <x-status.restarting :status="$displayStatus" />
+    @elseif(str($displayStatus)->lower()->contains('degraded'))
+        <x-status.degraded :status="$displayStatus" />
+    @else
+        <x-status.stopped :status="$displayStatus" />
+    @endif
+    @if (!str($complexStatus)->contains('exited') && $showRefreshButton)
+        <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
+            class="dark:hover:fill-white fill-black dark:fill-warning">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+            </svg>
+        </button>
+        <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
+            class="dark:hover:fill-white fill-black dark:fill-warning">
+            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+            </svg>
+        </button>
+    @endif
+</div>
diff --git a/resources/views/livewire/notifications/email.blade.php b/resources/views/livewire/notifications/email.blade.php
index 410703010..71a9f0680 100644
--- a/resources/views/livewire/notifications/email.blade.php
+++ b/resources/views/livewire/notifications/email.blade.php
@@ -30,7 +30,7 @@
             @endif
         </div>
         @if (!isCloud())
-            <div class="w-96">
+            <div class="w-full sm:w-96">
                 <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSave()" id="useInstanceEmailSettings"
                     label="Use system wide (transactional) email settings" />
             </div>
diff --git a/resources/views/livewire/notifications/telegram.blade.php b/resources/views/livewire/notifications/telegram.blade.php
index 1c83caf70..f87a13c37 100644
--- a/resources/views/livewire/notifications/telegram.blade.php
+++ b/resources/views/livewire/notifications/telegram.blade.php
@@ -41,7 +41,7 @@
             <h3 class="text-lg font-medium mb-3">Deployments</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentSuccessTelegramNotifications"
                             label="Deployment Success" />
                     </div>
@@ -49,7 +49,7 @@
                         id="telegramNotificationsDeploymentSuccessThreadId" />
                 </div>
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentFailureTelegramNotifications"
                             label="Deployment Failure" />
                     </div>
@@ -57,7 +57,7 @@
                         id="telegramNotificationsDeploymentFailureThreadId" />
                 </div>
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="statusChangeTelegramNotifications"
                             label="Container Status Changes"
                             helper="Send a notification when a container status changes. It will send a notification for Stopped and Restarted events of a container." />
@@ -71,7 +71,7 @@
             <h3 class="text-lg font-medium mb-3">Backups</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupSuccessTelegramNotifications"
                             label="Backup Success" />
                     </div>
@@ -80,7 +80,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupFailureTelegramNotifications"
                             label="Backup Failure" />
                     </div>
@@ -94,7 +94,7 @@
             <h3 class="text-lg font-medium mb-3">Scheduled Tasks</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskSuccessTelegramNotifications"
                             label="Scheduled Task Success" />
                     </div>
@@ -103,7 +103,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskFailureTelegramNotifications"
                             label="Scheduled Task Failure" />
                     </div>
@@ -117,7 +117,7 @@
             <h3 class="text-lg font-medium mb-3">Server</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupSuccessTelegramNotifications"
                             label="Docker Cleanup Success" />
                     </div>
@@ -126,7 +126,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupFailureTelegramNotifications"
                             label="Docker Cleanup Failure" />
                     </div>
@@ -135,7 +135,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverDiskUsageTelegramNotifications"
                             label="Server Disk Usage" />
                     </div>
@@ -144,7 +144,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverReachableTelegramNotifications"
                             label="Server Reachable" />
                     </div>
@@ -153,7 +153,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverUnreachableTelegramNotifications"
                             label="Server Unreachable" />
                     </div>
@@ -162,7 +162,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverPatchTelegramNotifications"
                             label="Server Patching" />
                     </div>
@@ -171,7 +171,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="traefikOutdatedTelegramNotifications"
                             label="Traefik Proxy Outdated" />
                     </div>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index d743e346e..caf105dbf 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -276,7 +276,7 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                         helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($baseDirectory . $dockerComposeLocation, '/') }}</span>"
                                         x-model="composeLocation" @blur="normalizeComposeLocation()" />
                                 </div>
-                                <div class="w-96">
+                                <div class="w-full sm:w-96">
                                     <x-forms.checkbox instantSave id="isPreserveRepositoryEnabled"
                                         label="Preserve Repository During Deployment"
                                         helper="Git repository (based on the base directory settings) will be copied to the deployment directory."
@@ -382,7 +382,7 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                 x-bind:disabled="!canUpdate" />
 
                             @if ($buildPack !== 'dockercompose')
-                                <div class="pt-2 w-96">
+                                <div class="pt-2 w-full sm:w-96">
                                     <x-forms.checkbox
                                         helper="Use a build server to build your application. You can configure your build server in the Server settings. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
                                         instantSave id="isBuildServerEnabled" label="Use a Build Server?"
@@ -422,7 +422,7 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                 monacoEditorLanguage="yaml" useMonacoEditor />
                         </div>
                     @endif
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox label="Escape special characters in labels?"
                             helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
                             id="isContainerLabelEscapeEnabled" instantSave
@@ -521,7 +521,7 @@ class="flex items-start gap-2 p-4 mb-4 text-sm rounded-lg bg-blue-50 dark:bg-blu
 
                 <h3 class="pt-8">HTTP Basic Authentication</h3>
                 <div>
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox helper="This will add the proper proxy labels to the container." instantSave
                             label="Enable" id="isHttpBasicAuthEnabled" x-bind:disabled="!canUpdate" />
                     </div>
@@ -543,7 +543,7 @@ class="flex items-start gap-2 p-4 mb-4 text-sm rounded-lg bg-blue-50 dark:bg-blu
                     <x-forms.textarea label="Container Labels" rows="15" id="customLabels"
                         monacoEditorLanguage="ini" useMonacoEditor x-bind:disabled="!canUpdate"></x-forms.textarea>
                 @endif
-                <div class="w-96">
+                <div class="w-full sm:w-96">
                     <x-forms.checkbox label="Readonly labels"
                         helper="Labels are readonly by default. Readonly means that edits you do to the labels could be lost and Coolify will autogenerate the labels for you. If you want to edit the labels directly, disable this option. <br><br>Be careful, it could break the proxy configuration after you restart the container as Coolify will now NOT autogenerate the labels for you (ofc you can always reset the labels to the coolify defaults manually)."
                         id="isContainerLabelReadonlyEnabled" instantSave
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index 4af466fc5..d69709f06 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -1,16 +1,17 @@
 <nav wire:poll.10000ms="checkStatus" class="pb-6">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
     <div class="navbar-main">
-        <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
-            <a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+        <nav
+            class="scrollbar flex min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:w-auto md:overflow-visible">
+            <a class="shrink-0 {{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
-            <a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+            <a class="shrink-0 {{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.application.deployment.index', $parameters) }}">
                 Deployments
             </a>
-            <a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
+            <a class="shrink-0 {{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.application.logs', $parameters) }}">
                 <div class="flex items-center gap-1">
                     Logs
@@ -23,100 +24,160 @@
             </a>
             @if (!$application->destination->server->isSwarm())
                 @can('canAccessTerminal')
-                    <a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
+                    <a class="shrink-0 {{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
                         href="{{ route('project.application.command', $parameters) }}">
                         Terminal
                     </a>
                 @endcan
             @endif
-            <x-applications.links :application="$application" />
+            <div class="shrink-0">
+                <x-applications.links :application="$application" />
+            </div>
         </nav>
         <div class="flex flex-wrap gap-2 items-center">
             @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
                 <div>Please load a Compose file.</div>
             @else
-                @if (!$application->destination->server->isSwarm())
-                    <div>
-                        <x-applications.advanced :application="$application" />
-                    </div>
-                @endif
-                <div class="flex flex-wrap gap-2">
-                    @if (!str($application->status)->startsWith('exited'))
-                        @if (!$application->destination->server->isSwarm())
-                            <x-forms.button title="With rolling update if possible" wire:click='deploy'>
-                                <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
-                            </x-forms.button>
+                <div class="md:hidden">
+                    <x-dropdown>
+                        <x-slot:title>
+                            Actions
+                        </x-slot>
+                        @if (!str($application->status)->startsWith('exited'))
+                            @if (!$application->destination->server->isSwarm())
+                                <div class="dropdown-item dropdown-item-touch" wire:click='deploy'>
+                                    Redeploy
+                                </div>
+                            @endif
+                            @if ($application->build_pack !== 'dockercompose')
+                                @if ($application->destination->server->isSwarm())
+                                    <div class="dropdown-item dropdown-item-touch" wire:click='deploy'>
+                                        Update Service
+                                    </div>
+                                @else
+                                    <div class="dropdown-item dropdown-item-touch" wire:click='restart'>
+                                        Restart
+                                    </div>
+                                @endif
+                            @endif
+                            <x-modal-confirmation title="Confirm Application Stopping?" buttonTitle="Stop"
+                                submitAction="stop" :checkboxes="$checkboxes" :actions="[
+                                    'This application will be stopped.',
+                                    'All non-persistent data of this application will be deleted.',
+                                ]" :confirmWithText="false" :confirmWithPassword="false"
+                                step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                        @else
+                            <div class="dropdown-item dropdown-item-touch" wire:click='deploy'>
+                                Deploy
+                            </div>
                         @endif
-                        @if ($application->build_pack !== 'dockercompose')
-                            @if ($application->destination->server->isSwarm())
-                                <x-forms.button title="Redeploy Swarm Service (rolling update)" wire:click='deploy'>
-                                    <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
-                                </x-forms.button>
+
+                        @if (!$application->destination->server->isSwarm())
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+
+                            @if ($application->status === 'running')
+                                <div class="dropdown-item dropdown-item-touch" wire:click='force_deploy_without_cache'>
+                                    Force deploy (without cache)
+                                </div>
                             @else
-                                <x-forms.button title="Restart without rebuilding" wire:click='restart'>
-                                    <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
-                                </x-forms.button>
+                                <div class="dropdown-item dropdown-item-touch" wire:click='deploy(true)'>
+                                    Force deploy (without cache)
+                                </div>
                             @endif
                         @endif
-                        <x-modal-confirmation title="Confirm Application Stopping?" buttonTitle="Stop"
-                            submitAction="stop" :checkboxes="$checkboxes" :actions="[
-                                'This application will be stopped.',
-                                'All non-persistent data of this application will be deleted.',
-                            ]" :confirmWithText="false" :confirmWithPassword="false"
-                            step1ButtonText="Continue" step2ButtonText="Confirm">
-                            <x-slot:button-title>
-                                <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-slot:button-title>
-                        </x-modal-confirmation>
-                    @else
-                        <x-forms.button wire:click='deploy'>
-                            <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
-                        </x-forms.button>
+                    </x-dropdown>
+                </div>
+
+                <div class="hidden flex-wrap items-center gap-2 md:flex">
+                    @if (!$application->destination->server->isSwarm())
+                        <div>
+                            <x-applications.advanced :application="$application" />
+                        </div>
                     @endif
+                    <div class="flex flex-wrap gap-2">
+                        @if (!str($application->status)->startsWith('exited'))
+                            @if (!$application->destination->server->isSwarm())
+                                <x-forms.button title="With rolling update if possible" wire:click='deploy'>
+                                    <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
+                                </x-forms.button>
+                            @endif
+                            @if ($application->build_pack !== 'dockercompose')
+                                @if ($application->destination->server->isSwarm())
+                                    <x-forms.button title="Redeploy Swarm Service (rolling update)" wire:click='deploy'>
+                                        <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
+                                    </x-forms.button>
+                                @else
+                                    <x-forms.button title="Restart without rebuilding" wire:click='restart'>
+                                        <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
+                                    </x-forms.button>
+                                @endif
+                            @endif
+                            <x-modal-confirmation title="Confirm Application Stopping?" buttonTitle="Stop"
+                                submitAction="stop" :checkboxes="$checkboxes" :actions="[
+                                    'This application will be stopped.',
+                                    'All non-persistent data of this application will be deleted.',
+                                ]" :confirmWithText="false" :confirmWithPassword="false"
+                                step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:button-title>
+                                    <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-slot:button-title>
+                            </x-modal-confirmation>
+                        @else
+                            <x-forms.button wire:click='deploy'>
+                                <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
+                            </x-forms.button>
+                        @endif
+                    </div>
                 </div>
             @endif
         </div>
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 4087769cc..89a64b0e1 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -10,18 +10,18 @@
     </x-slide-over>
     <div class="navbar-main">
         <nav
-            class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
-            <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+            class="scrollbar flex min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:w-auto md:overflow-visible">
+            <a class="shrink-0 {{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.database.configuration', $parameters) }}">
                 Configuration
             </a>
 
-            <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
+            <a class="shrink-0 {{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.logs', $parameters) }}">
                 Logs
             </a>
             @can('canAccessTerminal')
-                <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
+                <a class="shrink-0 {{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.database.command', $parameters) }}">
                     Terminal
                 </a>
@@ -31,7 +31,7 @@ class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:o
                     $database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
                     $database->getMorphClass() === 'App\Models\StandaloneMysql' ||
                     $database->getMorphClass() === 'App\Models\StandaloneMariadb')
-                <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                <a class="shrink-0 {{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                     href="{{ route('project.database.backup.index', $parameters) }}">
                     Backups
                 </a>
@@ -39,57 +39,97 @@ class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:o
         </nav>
         @if ($database->destination->server->isFunctional())
             <div class="flex flex-wrap gap-2 items-center">
-                @if (!str($database->status)->startsWith('exited'))
-                    <x-modal-confirmation title="Confirm Database Restart?" buttonTitle="Restart" submitAction="restart"
-                        :actions="[
-                            'This database will be unavailable during the restart.',
-                            'If the database is currently in use data could be lost.',
-                        ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Database"
-                        :dispatchEvent="true" dispatchEventType="restartEvent">
-                        <x-slot:button-title>
-                            <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
-                        </x-slot:button-title>
-                    </x-modal-confirmation>
-                    <x-modal-confirmation title="Confirm Database Stopping?" buttonTitle="Stop" submitAction="stop"
-                        :checkboxes="$checkboxes" :actions="[
-                            'This database will be stopped.',
-                            'If the database is currently in use data could be lost.',
-                            'All non-persistent data of this database (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the database again).',
-                        ]" :confirmWithText="false" :confirmWithPassword="false"
-                        step1ButtonText="Continue" step2ButtonText="Confirm">
-                        <x-slot:button-title>
-                            <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"
+                <div class="md:hidden">
+                    <x-dropdown>
+                        <x-slot:title>
+                            Actions
+                        </x-slot>
+                        @if (!str($database->status)->startsWith('exited'))
+                            <x-modal-confirmation title="Confirm Database Restart?" buttonTitle="Restart" submitAction="restart"
+                                :actions="[
+                                    'This database will be unavailable during the restart.',
+                                    'If the database is currently in use data could be lost.',
+                                ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Database"
+                                :dispatchEvent="true" dispatchEventType="restartEvent">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch">
+                                        Restart
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <x-modal-confirmation title="Confirm Database Stopping?" buttonTitle="Stop" submitAction="stop"
+                                :checkboxes="$checkboxes" :actions="[
+                                    'This database will be stopped.',
+                                    'If the database is currently in use data could be lost.',
+                                    'All non-persistent data of this database (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the database again).',
+                                ]" :confirmWithText="false" :confirmWithPassword="false"
+                                step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                        @else
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('startEvent')">
+                                Start
+                            </div>
+                        @endif
+                    </x-dropdown>
+                </div>
+                <div class="hidden flex-wrap items-center gap-2 md:flex">
+                    @if (!str($database->status)->startsWith('exited'))
+                        <x-modal-confirmation title="Confirm Database Restart?" buttonTitle="Restart" submitAction="restart"
+                            :actions="[
+                                'This database will be unavailable during the restart.',
+                                'If the database is currently in use data could be lost.',
+                            ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Database"
+                            :dispatchEvent="true" dispatchEventType="restartEvent">
+                            <x-slot:button-title>
+                                <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
+                            </x-slot:button-title>
+                        </x-modal-confirmation>
+                        <x-modal-confirmation title="Confirm Database Stopping?" buttonTitle="Stop" submitAction="stop"
+                            :checkboxes="$checkboxes" :actions="[
+                                'This database will be stopped.',
+                                'If the database is currently in use data could be lost.',
+                                'All non-persistent data of this database (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the database again).',
+                            ]" :confirmWithText="false" :confirmWithPassword="false"
+                            step1ButtonText="Continue" step2ButtonText="Confirm">
+                            <x-slot:button-title>
+                                <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-slot:button-title>
+                        </x-modal-confirmation>
+                    @else
+                        <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+                            <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>
-                                <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>
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
                             </svg>
-                            Stop
-                        </x-slot:button-title>
-                    </x-modal-confirmation>
-                @else
-                    <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
-                        <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
+                            Start
+                        </button>
+                    @endif
+                </div>
                 @script
                     <script>
                         $wire.$on('startEvent', () => {
diff --git a/resources/views/livewire/project/service/file-storage.blade.php b/resources/views/livewire/project/service/file-storage.blade.php
index 4bd88d761..48eb935ab 100644
--- a/resources/views/livewire/project/service/file-storage.blade.php
+++ b/resources/views/livewire/project/service/file-storage.blade.php
@@ -17,7 +17,7 @@
         </div>
         @if ($resource instanceof \App\Models\Application)
             @can('update', $resource)
-                <div class="w-96">
+                <div class="w-full sm:w-96">
                     <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
                         id="isPreviewSuffixEnabled"
                         helper="When enabled, a -pr-N suffix is added to this volume's path for preview deployments (e.g. ./scripts becomes ./scripts-pr-1). Disable this for volumes that contain shared config or scripts from your repository."></x-forms.checkbox>
@@ -67,7 +67,7 @@
                 @if (!$fileStorage->is_directory)
                     @can('update', $resource)
                         @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
-                            <div class="w-96">
+                            <div class="w-full sm:w-96">
                                 <x-forms.checkbox instantSave label="Is this based on the Git repository?"
                                     id="isBasedOnGit"></x-forms.checkbox>
                             </div>
@@ -82,7 +82,7 @@
                         @endif
                     @else
                         @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
-                            <div class="w-96">
+                            <div class="w-full sm:w-96">
                                 <x-forms.checkbox disabled label="Is this based on the Git repository?"
                                     id="isBasedOnGit"></x-forms.checkbox>
                             </div>
@@ -103,7 +103,7 @@
                         </div>
                     @endcan
                     @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
-                        <div class="w-96">
+                        <div class="w-full sm:w-96">
                             <x-forms.checkbox disabled label="Is this based on the Git repository?"
                                 id="isBasedOnGit"></x-forms.checkbox>
                         </div>
diff --git a/resources/views/livewire/project/service/heading.blade.php b/resources/views/livewire/project/service/heading.blade.php
index c33ebc279..264a96e9c 100644
--- a/resources/views/livewire/project/service/heading.blade.php
+++ b/resources/views/livewire/project/service/heading.blade.php
@@ -9,120 +9,198 @@
     <h1>{{ $title }}</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data">
-        <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
-            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+        <nav
+            class="scrollbar flex min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:w-auto md:overflow-visible">
+            <a class="shrink-0 {{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.service.configuration', $parameters) }}">
                 <button>Configuration</button>
             </a>
-            <a class="{{ request()->routeIs('project.service.logs') ? 'dark:text-white' : '' }}"
+            <a class="shrink-0 {{ request()->routeIs('project.service.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.logs', $parameters) }}">
                 <button>Logs</button>
             </a>
             @can('canAccessTerminal')
-                <a class="{{ request()->routeIs('project.service.command') ? 'dark:text-white' : '' }}"
+                <a class="shrink-0 {{ request()->routeIs('project.service.command') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.service.command', $parameters) }}">
                     <button>Terminal</button>
                 </a>
             @endcan
-            <x-services.links :service="$service" />
+            <div class="shrink-0">
+                <x-services.links :service="$service" />
+            </div>
         </nav>
         @if ($service->isDeployable)
-            <div class="flex flex-wrap order-first gap-2 items-center sm:order-last">
-                <x-services.advanced :service="$service" />
-                @if (str($service->status)->contains('running'))
-                    <x-forms.button title="Restart" @click="$wire.dispatch('restartEvent')">
-                        <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
-                    </x-forms.button>
-                    <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
-                        submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
-                        :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
-                        <x-slot:button-title>
-                            <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>
+            <div class="order-first flex flex-wrap items-center gap-2 sm:order-last">
+                <div class="md:hidden">
+                    <x-dropdown>
+                        <x-slot:title>
+                            Actions
+                        </x-slot>
+                        @if (str($service->status)->contains('running'))
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('restartEvent')">
+                                Restart
+                            </div>
+                            <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                                submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                                :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('pullAndRestartEvent')">
+                                Pull Latest Images & Restart
+                            </div>
+                        @elseif (str($service->status)->contains('degraded'))
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('restartEvent')">
+                                Restart
+                            </div>
+                            <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                                submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                                :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('forceDeployEvent')">
+                                Force Restart
+                            </div>
+                        @elseif (str($service->status)->contains('exited'))
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('startEvent')">
+                                Deploy
+                            </div>
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('forceDeployEvent')">
+                                Force Deploy
+                            </div>
+                            <div class="dropdown-item dropdown-item-touch" wire:click='stop(true)'>
+                                Force Cleanup Containers
+                            </div>
+                        @else
+                            <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                                submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                                :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('startEvent')">
+                                Deploy
+                            </div>
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('forceDeployEvent')">
+                                Force Deploy
+                            </div>
+                            <div class="dropdown-item dropdown-item-touch" wire:click='stop(true)'>
+                                Force Cleanup Containers
+                            </div>
+                        @endif
+                    </x-dropdown>
+                </div>
+                <div class="hidden flex-wrap items-center gap-2 md:flex">
+                    <x-services.advanced :service="$service" />
+                    @if (str($service->status)->contains('running'))
+                        <x-forms.button title="Restart" @click="$wire.dispatch('restartEvent')">
+                            <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>
-                            Stop
-                        </x-slot:button-title>
-                    </x-modal-confirmation>
-                @elseif (str($service->status)->contains('degraded'))
-                    <x-forms.button title="Restart" @click="$wire.dispatch('restartEvent')">
-                        <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
-                    </x-forms.button>
-                    <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
-                        submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
-                        :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
-                        <x-slot:button-title>
-                            <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>
+                            Restart
+                        </x-forms.button>
+                        <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                            submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                            :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                            <x-slot:button-title>
+                                <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-slot:button-title>
+                        </x-modal-confirmation>
+                    @elseif (str($service->status)->contains('degraded'))
+                        <x-forms.button title="Restart" @click="$wire.dispatch('restartEvent')">
+                            <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>
-                            Stop
-                        </x-slot:button-title>
-                    </x-modal-confirmation>
-                @elseif (str($service->status)->contains('exited'))
-                    <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
-                        <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>
-                @else
-                    <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
-                        submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
-                        :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
-                        <x-slot:button-title>
-                            <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"
+                            Restart
+                        </x-forms.button>
+                        <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                            submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                            :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                            <x-slot:button-title>
+                                <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-slot:button-title>
+                        </x-modal-confirmation>
+                    @elseif (str($service->status)->contains('exited'))
+                        <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+                            <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>
-                                <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>
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
                             </svg>
-                            Stop
-                        </x-slot:button-title>
-                    </x-modal-confirmation>
-                    <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
-                        <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
+                            Deploy
+                        </button>
+                    @else
+                        <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                            submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                            :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                            <x-slot:button-title>
+                                <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-slot:button-title>
+                        </x-modal-confirmation>
+                        <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+                            <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
+                </div>
             </div>
         @else
             <div class="flex flex-wrap order-first gap-2 items-center sm:order-last">
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
index 8c1c09e04..f4caedb8d 100644
--- a/resources/views/livewire/project/service/index.blade.php
+++ b/resources/views/livewire/project/service/index.blade.php
@@ -243,7 +243,7 @@ class="w-auto dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
                             </div>
                         </div>
                         <h3 class="pt-2">Advanced</h3>
-                        <div class="w-96">
+                        <div class="w-full sm:w-96">
                             <x-forms.checkbox canGate="update" :canResource="$serviceDatabase" instantSave="instantSaveExclude"
                                 label="Exclude from service status"
                                 helper="If you do not need to monitor this resource, enable. Useful if this service is optional."
diff --git a/resources/views/livewire/project/service/stack-form.blade.php b/resources/views/livewire/project/service/stack-form.blade.php
index 8972345bc..415077cc5 100644
--- a/resources/views/livewire/project/service/stack-form.blade.php
+++ b/resources/views/livewire/project/service/stack-form.blade.php
@@ -20,7 +20,7 @@
             placeholder="My super WordPress site" />
         <x-forms.input canGate="update" :canResource="$service" id="description" label="Description" />
     </div>
-    <div class="w-96">
+    <div class="w-full sm:w-96">
         <x-forms.checkbox canGate="update" :canResource="$service" instantSave id="connectToDockerNetwork"
             label="Connect To Predefined Network"
             helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='underline dark:text-white' target='_blank' href='https://coolify.io/docs/knowledge-base/docker/compose#connect-to-predefined-networks'>this</a>." />
@@ -46,4 +46,4 @@ class="font-bold">{{ data_get($field, 'serviceName') }}</span>{{ data_get($field
             @endforeach
         </div>
     @endif
-</form>
\ No newline at end of file
+</form>
diff --git a/resources/views/livewire/project/shared/storages/show.blade.php b/resources/views/livewire/project/shared/storages/show.blade.php
index 7fc58000c..c7de8ad9e 100644
--- a/resources/views/livewire/project/shared/storages/show.blade.php
+++ b/resources/views/livewire/project/shared/storages/show.blade.php
@@ -40,7 +40,7 @@
             @endif
             @if (!$isService)
                 @can('update', $resource)
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
                             id="isPreviewSuffixEnabled"
                             helper="When enabled, a -pr-N suffix is added to this volume's name for preview deployments (e.g. myvolume becomes myvolume-pr-1). Disable this for volumes that should be shared between the main and preview deployments."></x-forms.checkbox>
@@ -64,7 +64,7 @@
                     </div>
                 @endif
                 @if (!$isService)
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
                             id="isPreviewSuffixEnabled"
                             helper="When enabled, a -pr-N suffix is added to this volume's name for preview deployments (e.g. myvolume becomes myvolume-pr-1). Disable this for volumes that should be shared between the main and preview deployments."></x-forms.checkbox>
diff --git a/resources/views/livewire/server/proxy.blade.php b/resources/views/livewire/server/proxy.blade.php
index e7bfc151c..127f583d6 100644
--- a/resources/views/livewire/server/proxy.blade.php
+++ b/resources/views/livewire/server/proxy.blade.php
@@ -31,7 +31,7 @@
                         </x-callout>
                     @endif
                     <h3>Advanced</h3>
-                    <div class="pb-6 w-96">
+                    <div class="pb-6 w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$server"
                             helper="If set, all resources will only have docker container labels for {{ str($server->proxyType())->title() }}.<br>For applications, labels needs to be regenerated manually. <br>Resources needs to be restarted."
                             id="generateExactLabels"
diff --git a/resources/views/livewire/server/sentinel.blade.php b/resources/views/livewire/server/sentinel.blade.php
index 5ca535cbc..27a6d7eed 100644
--- a/resources/views/livewire/server/sentinel.blade.php
+++ b/resources/views/livewire/server/sentinel.blade.php
@@ -44,7 +44,7 @@
                     @endif
                 </div>
                 <div class="flex flex-col gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$server" wire:model.live="isSentinelEnabled"
                             label="Enable Sentinel" />
                         @if ($server->isSentinelEnabled())
diff --git a/resources/views/livewire/server/show.blade.php b/resources/views/livewire/server/show.blade.php
index 7017d7104..d694174d5 100644
--- a/resources/views/livewire/server/show.blade.php
+++ b/resources/views/livewire/server/show.blade.php
@@ -274,7 +274,7 @@ class="w-full input opacity-50 cursor-not-allowed"
 
                     <div class="w-full">
                         @if (!$server->isLocalhost())
-                            <div class="w-96">
+                            <div class="w-full sm:w-96">
                                 @if ($isBuildServerLocked)
                                     <x-forms.checkbox disabled instantSave id="isBuildServer"
                                         helper="You can't use this server as a build server because it has defined resources."
diff --git a/resources/views/livewire/source/github/change.blade.php b/resources/views/livewire/source/github/change.blade.php
index 9ccf1e2b7..e47fb0ae0 100644
--- a/resources/views/livewire/source/github/change.blade.php
+++ b/resources/views/livewire/source/github/change.blade.php
@@ -271,7 +271,7 @@ class=""
                             <div>You need to register a GitHub App before using this source.</div>
                         @endif
 
-                        <div class="flex flex-col gap-2 pt-4 w-96">
+                        <div class="flex w-full flex-col gap-2 pt-4 sm:w-96">
                             <x-forms.checkbox disabled id="default_permissions" label="Mandatory"
                                 helper="Contents: read<br>Metadata: read<br>Email: read" />
                             <x-forms.checkbox id="preview_deployment_permissions" label="Preview Deployments "
diff --git a/tests/Feature/BreadcrumbsVisibilityTest.php b/tests/Feature/BreadcrumbsVisibilityTest.php
new file mode 100644
index 000000000..f7a42e358
--- /dev/null
+++ b/tests/Feature/BreadcrumbsVisibilityTest.php
@@ -0,0 +1,71 @@
+<?php
+
+use App\Models\Application;
+use App\Models\Environment;
+use App\Models\InstanceSettings;
+use App\Models\Project;
+use App\Models\Server;
+use App\Models\StandaloneDocker;
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+uses(RefreshDatabase::class);
+
+beforeEach(function () {
+    $this->user = User::factory()->create();
+    $this->team = Team::factory()->create();
+    $this->team->members()->attach($this->user->id, ['role' => 'owner']);
+
+    InstanceSettings::unguarded(function () {
+        InstanceSettings::query()->create([
+            'id' => 0,
+            'is_registration_enabled' => true,
+        ]);
+    });
+
+    $this->actingAs($this->user);
+    session(['currentTeam' => $this->team]);
+
+    $this->server = Server::factory()->create(['team_id' => $this->team->id]);
+    $this->destination = StandaloneDocker::query()->where('server_id', $this->server->id)->firstOrFail();
+    $this->project = Project::factory()->create(['team_id' => $this->team->id]);
+    $this->environment = Environment::factory()->create(['project_id' => $this->project->id]);
+    $this->application = Application::factory()->create([
+        'environment_id' => $this->environment->id,
+        'destination_id' => $this->destination->id,
+        'destination_type' => $this->destination->getMorphClass(),
+        'name' => 'Pure Dockerfile Example',
+        'status' => 'running',
+    ]);
+});
+
+it('hides the breadcrumb trail on mobile while keeping the current status visible', function () {
+    $response = $this->get(route('project.application.configuration', [
+        'project_uuid' => $this->project->uuid,
+        'environment_uuid' => $this->environment->uuid,
+        'application_uuid' => $this->application->uuid,
+    ]));
+
+    $response->assertSuccessful();
+    $response->assertSee('flex min-w-0 flex-col gap-1 md:hidden', false);
+    $response->assertSee('flex min-w-0 items-center text-xs text-neutral-400', false);
+    $response->assertSee('hidden flex-wrap items-center gap-y-1 md:flex', false);
+    $response->assertSee('flex flex-wrap items-center gap-1', false);
+    $response->assertSee(
+        'scrollbar flex min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:w-auto md:overflow-visible',
+        false,
+    );
+    $response->assertSee('shrink-0', false);
+    $response->assertSee('Actions');
+    $response->assertSee('dropdown-item-touch', false);
+    $response->assertSee('hidden flex-wrap items-center gap-2 md:flex', false);
+    $response->assertSee('window.innerWidth >= 768', false);
+    $response->assertSee(':style="panelStyles"', false);
+    $response->assertSee('absolute top-full z-50 mt-1 min-w-max max-w-[calc(100vw-1rem)] md:top-0 md:mt-6', false);
+    $response->assertSee('Pure Dockerfile Example');
+    $response->assertSee('Running');
+    $response->assertSee('pt-2 pb-4 md:pb-10', false);
+
+    expect($response->getContent())->not->toContain('hidden pt-2 pb-10 md:flex');
+});
diff --git a/tests/Feature/ResponsiveCheckboxLayoutTest.php b/tests/Feature/ResponsiveCheckboxLayoutTest.php
new file mode 100644
index 000000000..f0d534a0d
--- /dev/null
+++ b/tests/Feature/ResponsiveCheckboxLayoutTest.php
@@ -0,0 +1,113 @@
+<?php
+
+use App\Enums\ProxyStatus;
+use App\Enums\ProxyTypes;
+use App\Models\Application;
+use App\Models\Environment;
+use App\Models\InstanceSettings;
+use App\Models\PrivateKey;
+use App\Models\Project;
+use App\Models\Server;
+use App\Models\StandaloneDocker;
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+uses(RefreshDatabase::class);
+
+beforeEach(function () {
+    InstanceSettings::unguarded(function () {
+        InstanceSettings::query()->create([
+            'id' => 0,
+            'is_registration_enabled' => true,
+        ]);
+    });
+
+    $this->user = User::factory()->create([
+        'name' => 'Test User',
+        'email' => 'test@example.com',
+    ]);
+
+    $this->team = Team::factory()->create([
+        'show_boarding' => false,
+    ]);
+    $this->team->members()->attach($this->user->id, ['role' => 'owner']);
+
+    $this->actingAs($this->user);
+    session(['currentTeam' => $this->team]);
+
+    $this->privateKey = PrivateKey::create([
+        'team_id' => $this->team->id,
+        'name' => 'Test Key',
+        'description' => 'Test SSH key',
+        'private_key' => '-----BEGIN OPENSSH PRIVATE KEY-----
+b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
+QyNTUxOQAAACBbhpqHhqv6aI67Mj9abM3DVbmcfYhZAhC7ca4d9UCevAAAAJi/QySHv0Mk
+hwAAAAtzc2gtZWQyNTUxOQAAACBbhpqHhqv6aI67Mj9abM3DVbmcfYhZAhC7ca4d9UCevA
+AAAECBQw4jg1WRT2IGHMncCiZhURCts2s24HoDS0thHnnRKVuGmoeGq/pojrsyP1pszcNV
+uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
+-----END OPENSSH PRIVATE KEY-----',
+    ]);
+
+    $this->server = Server::factory()->create([
+        'team_id' => $this->team->id,
+        'private_key_id' => $this->privateKey->id,
+        'proxy' => [
+            'type' => ProxyTypes::TRAEFIK->value,
+            'status' => ProxyStatus::EXITED->value,
+        ],
+    ]);
+
+    $this->destination = StandaloneDocker::query()
+        ->where('server_id', $this->server->id)
+        ->firstOrFail();
+
+    $this->project = Project::factory()->create([
+        'team_id' => $this->team->id,
+    ]);
+
+    $this->environment = Environment::factory()->create([
+        'project_id' => $this->project->id,
+    ]);
+
+    $this->application = Application::factory()->create([
+        'environment_id' => $this->environment->id,
+        'destination_id' => $this->destination->id,
+        'destination_type' => $this->destination->getMorphClass(),
+        'status' => 'running',
+    ]);
+});
+
+it('renders responsive checkbox classes on the application configuration page', function () {
+    $response = $this->get(route('project.application.configuration', [
+        'project_uuid' => $this->project->uuid,
+        'environment_uuid' => $this->environment->uuid,
+        'application_uuid' => $this->application->uuid,
+    ]));
+
+    $response->assertSuccessful();
+    $response->assertSee('Use a Build Server?');
+    $response->assertSee('form-control flex max-w-full flex-row items-center gap-4 py-1 pr-2', false);
+    $response->assertSee('label flex w-full max-w-full min-w-0 items-center gap-4 px-0', false);
+    $response->assertSee('flex min-w-0 grow gap-2 break-words', false);
+    $response->assertSee('shrink-0', false);
+    $response->assertSee('pt-2 w-full sm:w-96', false);
+
+    expect($response->getContent())->not->toContain('min-w-fit');
+});
+
+it('renders responsive checkbox classes on the server page', function () {
+    $response = $this->get(route('server.show', [
+        'server_uuid' => $this->server->uuid,
+    ]));
+
+    $response->assertSuccessful();
+    $response->assertSee('Use it as a build server?');
+    $response->assertSee('form-control flex max-w-full flex-row items-center gap-4 py-1 pr-2', false);
+    $response->assertSee('label flex w-full max-w-full min-w-0 items-center gap-4 px-0', false);
+    $response->assertSee('flex min-w-0 grow gap-2 break-words', false);
+    $response->assertSee('shrink-0', false);
+    $response->assertSee('w-full sm:w-96', false);
+
+    expect($response->getContent())->not->toContain('min-w-fit');
+});