feat: harden auth flows and server mobile navigation

Add normalized email identity rate limiting for registration and forgot-password requests, and refresh Sentinel status from restart broadcasts.

Rework server sidebars and navbar for mobile menus and active status visibility.

resources/views/components/resources/breadcrumbs.blade.php

@@ -52,7 +52,7 @@
 <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() }}
+            <a class="min-w-0 truncate" {{ wireNavigate() }}
                 href="{{ $isApplication
                     ? route('project.application.configuration', $routeParams)
                     : ($isService

resources/views/components/server/sidebar-proxy.blade.php

@@ -1,16 +1,139 @@
-<div class="sub-menu-wrapper">
-    <a class="{{ request()->routeIs('server.proxy') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
-        href="{{ route('server.proxy', $parameters) }}">
-        <span class="menu-item-label">Configuration</span>
-    </a>
-    @if ($server->proxySet())
-        <a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
-            href="{{ route('server.proxy.dynamic-confs', $parameters) }}">
-            <span class="menu-item-label">Dynamic Configurations</span>
-        </a>
-        <a class="{{ request()->routeIs('server.proxy.logs') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}"
-            href="{{ route('server.proxy.logs', $parameters) }}">
-            <span class="menu-item-label">Logs</span>
-        </a>
-    @endif
+@php
+    $serverPageItems = [
+        [
+            'label' => 'Configuration',
+            'route' => 'server.show',
+            'active' => request()->routeIs('server.show', 'server.advanced', 'server.private-key', 'server.cloud-provider-token', 'server.ca-certificate', 'server.cloudflare-tunnel', 'server.docker-cleanup', 'server.destinations', 'server.log-drains', 'server.metrics', 'server.swarm', 'server.delete'),
+        ],
+        [
+            'label' => 'Proxy',
+            'route' => 'server.proxy',
+            'active' => request()->routeIs('server.proxy', 'server.proxy.*'),
+            'visible' => ! $server->isSwarmWorker() && ! $server->settings->is_build_server,
+        ],
+        [
+            'label' => 'Sentinel',
+            'route' => 'server.sentinel',
+            'active' => request()->routeIs('server.sentinel', 'server.sentinel.*'),
+            'visible' => $server->isFunctional() && ! $server->isSwarm() && ! $server->settings->is_build_server && auth()->user()?->can('viewSentinel', $server),
+        ],
+        [
+            'label' => 'Resources',
+            'route' => 'server.resources',
+            'active' => request()->routeIs('server.resources'),
+        ],
+        [
+            'label' => 'Terminal',
+            'route' => 'server.command',
+            'active' => request()->routeIs('server.command'),
+            'navigate' => false,
+            'visible' => auth()->user()?->can('canAccessTerminal'),
+        ],
+        [
+            'label' => 'Security',
+            'route' => 'server.security.patches',
+            'active' => request()->routeIs('server.security.patches'),
+            'visible' => auth()->user()?->can('update', $server),
+        ],
+    ];
+    $proxyMenuItems = [
+        [
+            'label' => 'Configuration',
+            'route' => 'server.proxy',
+            'active' => request()->routeIs('server.proxy'),
+        ],
+        [
+            'label' => 'Dynamic Configurations',
+            'route' => 'server.proxy.dynamic-confs',
+            'active' => request()->routeIs('server.proxy.dynamic-confs'),
+            'visible' => $server->proxySet(),
+        ],
+        [
+            'label' => 'Logs',
+            'route' => 'server.proxy.logs',
+            'active' => request()->routeIs('server.proxy.logs'),
+            'visible' => $server->proxySet(),
+            'navigate' => false,
+        ],
+    ];
+
+    $serverPageItems = array_values(array_filter(
+        $serverPageItems,
+        fn (array $item): bool => $item['visible'] ?? true,
+    ));
+    $proxyMenuItems = array_values(array_filter(
+        $proxyMenuItems,
+        fn (array $item): bool => $item['visible'] ?? true,
+    ));
+    $activeProxyMenuItem = collect($proxyMenuItems)->firstWhere('active', true) ?? $proxyMenuItems[0];
+    $activeProxyMenuValue = (($activeProxyMenuItem['navigate'] ?? true) ? 'navigate' : 'location').'|proxy|'.route($activeProxyMenuItem['route'], $parameters);
+@endphp
+
+<div class="w-full md:w-auto">
+    <div class="mb-4 w-full border-b-2 border-solid border-neutral-200 pb-6 md:hidden dark:border-coolgray-200">
+        <label id="server-mobile-section-label" for="server-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
+        <select id="server-mobile-section" class="select w-full" aria-label="Proxy menu"
+            data-current-value="{{ $activeProxyMenuValue }}"
+            x-data="{
+                init() {
+                    this.syncFromLocation();
+                    window.Livewire?.hook?.('morphed', ({ el }) => {
+                        if (el.contains(this.$el)) {
+                            queueMicrotask(() => this.syncFromLocation());
+                        }
+                    });
+                },
+                selected: $el.dataset.currentValue,
+                syncFromLocation() {
+                    const currentUrl = new URL(window.location.href);
+                    const matchingOptions = Array.from(this.$el.options).filter((option) => {
+                        const optionUrl = new URL(option.value.split('|').slice(2).join('|'), window.location.origin);
+
+                        return optionUrl.pathname === currentUrl.pathname;
+                    });
+                    const selectedOption = matchingOptions.find((option) => option.value.startsWith('navigate|proxy|') || option.value.startsWith('location|proxy|')) || matchingOptions[0];
+
+                    if (selectedOption) {
+                        this.selected = selectedOption.value;
+                    }
+                },
+            }"
+            x-on:livewire:navigated.window="syncFromLocation()"
+            x-model="selected"
+            x-on:change="
+                const value = $event.target.value;
+                const url = value.split('|').slice(2).join('|');
+
+                if (value.startsWith('navigate|')) {
+                    window.Livewire?.navigate ? window.Livewire.navigate(url) : window.location.href = url;
+                    return;
+                }
+
+                window.location.href = url;
+            ">
+            <optgroup label="Server">
+                @foreach ($serverPageItems as $menuItem)
+                    <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|server|{{ route($menuItem['route'], $parameters) }}">
+                        {{ $menuItem['label'] }}
+                    </option>
+                @endforeach
+            </optgroup>
+            <optgroup label="Proxy">
+                @foreach ($proxyMenuItems as $menuItem)
+                    <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|proxy|{{ route($menuItem['route'], $parameters) }}">
+                        {{ $menuItem['label'] }}
+                    </option>
+                @endforeach
+            </optgroup>
+        </select>
+    </div>
+
+    <div class="sub-menu-wrapper hidden md:flex">
+        @foreach ($proxyMenuItems as $menuItem)
+            <a class="{{ $menuItem['active'] ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" @if ($menuItem['navigate'] ?? true) {{ wireNavigate() }} @endif
+                href="{{ route($menuItem['route'], $parameters) }}">
+                <span class="menu-item-label">{{ $menuItem['label'] }}</span>
+            </a>
+        @endforeach
+    </div>
 </div>

resources/views/components/server/sidebar-security.blade.php

@@ -1,10 +1,127 @@
-<div class="sub-menu-wrapper">
-    <a class="{{ request()->routeIs('server.security.patches') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
-        href="{{ route('server.security.patches', $parameters) }}">
-        <span class="menu-item-label">Server Patching</span>
-    </a>
-    <a class="{{ request()->routeIs('server.security.terminal-access') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}"
-        href="{{ route('server.security.terminal-access', $parameters) }}">
-        <span class="menu-item-label">Terminal Access</span>
-    </a>
+@php
+    $serverPageItems = [
+        [
+            'label' => 'Configuration',
+            'route' => 'server.show',
+            'active' => request()->routeIs('server.show', 'server.advanced', 'server.private-key', 'server.cloud-provider-token', 'server.ca-certificate', 'server.cloudflare-tunnel', 'server.docker-cleanup', 'server.destinations', 'server.log-drains', 'server.metrics', 'server.swarm', 'server.delete'),
+        ],
+        [
+            'label' => 'Proxy',
+            'route' => 'server.proxy',
+            'active' => request()->routeIs('server.proxy', 'server.proxy.*'),
+            'visible' => ! $server->isSwarmWorker() && ! $server->settings->is_build_server,
+        ],
+        [
+            'label' => 'Sentinel',
+            'route' => 'server.sentinel',
+            'active' => request()->routeIs('server.sentinel', 'server.sentinel.*'),
+            'visible' => $server->isFunctional() && ! $server->isSwarm() && ! $server->settings->is_build_server && auth()->user()?->can('viewSentinel', $server),
+        ],
+        [
+            'label' => 'Resources',
+            'route' => 'server.resources',
+            'active' => request()->routeIs('server.resources'),
+        ],
+        [
+            'label' => 'Terminal',
+            'route' => 'server.command',
+            'active' => request()->routeIs('server.command'),
+            'navigate' => false,
+            'visible' => auth()->user()?->can('canAccessTerminal'),
+        ],
+        [
+            'label' => 'Security',
+            'route' => 'server.security.patches',
+            'active' => request()->routeIs('server.security.patches'),
+            'visible' => auth()->user()?->can('update', $server),
+        ],
+    ];
+    $securityMenuItems = [
+        [
+            'label' => 'Server Patching',
+            'route' => 'server.security.patches',
+            'active' => request()->routeIs('server.security.patches'),
+        ],
+        [
+            'label' => 'Terminal Access',
+            'route' => 'server.security.terminal-access',
+            'active' => request()->routeIs('server.security.terminal-access'),
+            'navigate' => false,
+        ],
+    ];
+    $serverPageItems = array_values(array_filter(
+        $serverPageItems,
+        fn (array $item): bool => $item['visible'] ?? true,
+    ));
+    $activeSecurityMenuItem = collect($securityMenuItems)->firstWhere('active', true) ?? $securityMenuItems[0];
+    $activeSecurityMenuValue = (($activeSecurityMenuItem['navigate'] ?? true) ? 'navigate' : 'location').'|security|'.route($activeSecurityMenuItem['route'], $parameters);
+@endphp
+
+<div class="w-full md:w-auto">
+    <div class="mb-4 w-full border-b-2 border-solid border-neutral-200 pb-6 md:hidden dark:border-coolgray-200">
+        <label id="server-mobile-section-label" for="server-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
+        <select id="server-mobile-section" class="select w-full" aria-label="Security menu"
+            data-current-value="{{ $activeSecurityMenuValue }}"
+            x-data="{
+                init() {
+                    this.syncFromLocation();
+                    window.Livewire?.hook?.('morphed', ({ el }) => {
+                        if (el.contains(this.$el)) {
+                            queueMicrotask(() => this.syncFromLocation());
+                        }
+                    });
+                },
+                selected: $el.dataset.currentValue,
+                syncFromLocation() {
+                    const currentUrl = new URL(window.location.href);
+                    const matchingOptions = Array.from(this.$el.options).filter((option) => {
+                        const optionUrl = new URL(option.value.split('|').slice(2).join('|'), window.location.origin);
+
+                        return optionUrl.pathname === currentUrl.pathname;
+                    });
+                    const selectedOption = matchingOptions.find((option) => option.value.startsWith('navigate|security|') || option.value.startsWith('location|security|')) || matchingOptions[0];
+
+                    if (selectedOption) {
+                        this.selected = selectedOption.value;
+                    }
+                },
+            }"
+            x-on:livewire:navigated.window="syncFromLocation()"
+            x-model="selected"
+            x-on:change="
+                const value = $event.target.value;
+                const url = value.split('|').slice(2).join('|');
+
+                if (value.startsWith('navigate|')) {
+                    window.Livewire?.navigate ? window.Livewire.navigate(url) : window.location.href = url;
+                    return;
+                }
+
+                window.location.href = url;
+            ">
+            <optgroup label="Server">
+                @foreach ($serverPageItems as $menuItem)
+                    <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|server|{{ route($menuItem['route'], $parameters) }}">
+                        {{ $menuItem['label'] }}
+                    </option>
+                @endforeach
+            </optgroup>
+            <optgroup label="Security">
+                @foreach ($securityMenuItems as $menuItem)
+                    <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|security|{{ route($menuItem['route'], $parameters) }}">
+                        {{ $menuItem['label'] }}
+                    </option>
+                @endforeach
+            </optgroup>
+        </select>
+    </div>
+
+    <div class="sub-menu-wrapper hidden md:flex">
+        @foreach ($securityMenuItems as $menuItem)
+            <a class="{{ $menuItem['active'] ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" @if ($menuItem['navigate'] ?? true) {{ wireNavigate() }} @endif
+                href="{{ route($menuItem['route'], $parameters) }}">
+                <span class="menu-item-label">{{ $menuItem['label'] }}</span>
+            </a>
+        @endforeach
+    </div>
 </div>

resources/views/components/server/sidebar-sentinel.blade.php

@@ -1,12 +1,121 @@
-<div class="sub-menu-wrapper">
+@php
+    $serverPageItems = [
+        [
+            'label' => 'Configuration',
+            'route' => 'server.show',
+            'active' => request()->routeIs('server.show', 'server.advanced', 'server.private-key', 'server.cloud-provider-token', 'server.ca-certificate', 'server.cloudflare-tunnel', 'server.docker-cleanup', 'server.destinations', 'server.log-drains', 'server.metrics', 'server.swarm', 'server.delete'),
+        ],
+        [
+            'label' => 'Proxy',
+            'route' => 'server.proxy',
+            'active' => request()->routeIs('server.proxy', 'server.proxy.*'),
+            'visible' => ! $server->isSwarmWorker() && ! $server->settings->is_build_server,
+        ],
+        [
+            'label' => 'Sentinel',
+            'route' => 'server.sentinel',
+            'active' => request()->routeIs('server.sentinel', 'server.sentinel.*'),
+            'visible' => $server->isFunctional() && ! $server->isSwarm() && ! $server->settings->is_build_server && auth()->user()?->can('viewSentinel', $server),
+        ],
+        [
+            'label' => 'Resources',
+            'route' => 'server.resources',
+            'active' => request()->routeIs('server.resources'),
+        ],
+        [
+            'label' => 'Terminal',
+            'route' => 'server.command',
+            'active' => request()->routeIs('server.command'),
+            'navigate' => false,
+            'visible' => auth()->user()?->can('canAccessTerminal'),
+        ],
+        [
+            'label' => 'Security',
+            'route' => 'server.security.patches',
+            'active' => request()->routeIs('server.security.patches'),
+            'visible' => auth()->user()?->can('update', $server),
+        ],
+    ];
+    $sentinelMenuItems = [
+        [
+            'label' => 'Configuration',
+            'route' => 'server.sentinel',
+            'active' => request()->routeIs('server.sentinel'),
+        ],
+        [
+            'label' => 'Logs',
+            'route' => 'server.sentinel.logs',
+            'active' => request()->routeIs('server.sentinel.logs'),
+        ],
+    ];
+    $serverPageItems = array_values(array_filter(
+        $serverPageItems,
+        fn (array $item): bool => $item['visible'] ?? true,
+    ));
+    $activeSentinelMenuItem = collect($sentinelMenuItems)->firstWhere('active', true) ?? $sentinelMenuItems[0];
+    $activeSentinelMenuValue = 'navigate|sentinel|'.route($activeSentinelMenuItem['route'], $parameters);
+@endphp
+
+<div class="w-full md:w-auto">
     @can('viewSentinel', $server)
-        <a class="{{ request()->routeIs('server.sentinel') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
-            href="{{ route('server.sentinel', $parameters) }}">
-            <span class="menu-item-label">Configuration</span>
-        </a>
-        <a class="{{ request()->routeIs('server.sentinel.logs') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
-            href="{{ route('server.sentinel.logs', $parameters) }}">
-            <span class="menu-item-label">Logs</span>
-        </a>
+        <div class="mb-4 w-full border-b-2 border-solid border-neutral-200 pb-6 md:hidden dark:border-coolgray-200">
+            <label id="server-mobile-section-label" for="server-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
+            <select id="server-mobile-section" class="select w-full" aria-label="Sentinel menu"
+                data-current-value="{{ $activeSentinelMenuValue }}"
+                x-data="{
+                    init() {
+                        this.syncFromLocation();
+                        window.Livewire?.hook?.('morphed', ({ el }) => {
+                            if (el.contains(this.$el)) {
+                                queueMicrotask(() => this.syncFromLocation());
+                            }
+                        });
+                    },
+                    selected: $el.dataset.currentValue,
+                    syncFromLocation() {
+                        const currentUrl = new URL(window.location.href);
+                        const matchingOptions = Array.from(this.$el.options).filter((option) => {
+                            const optionUrl = new URL(option.value.split('|').slice(2).join('|'), window.location.origin);
+
+                            return optionUrl.pathname === currentUrl.pathname;
+                        });
+                        const selectedOption = matchingOptions.find((option) => option.value.startsWith('navigate|sentinel|')) || matchingOptions[0];
+
+                        if (selectedOption) {
+                            this.selected = selectedOption.value;
+                        }
+                    },
+                }"
+                x-on:livewire:navigated.window="syncFromLocation()"
+                x-model="selected"
+                x-on:change="
+                    const url = $event.target.value.split('|').slice(2).join('|');
+                    window.Livewire?.navigate ? window.Livewire.navigate(url) : window.location.href = url;
+                ">
+                <optgroup label="Server">
+                    @foreach ($serverPageItems as $menuItem)
+                        <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|server|{{ route($menuItem['route'], $parameters) }}">
+                            {{ $menuItem['label'] }}
+                        </option>
+                    @endforeach
+                </optgroup>
+                <optgroup label="Sentinel">
+                    @foreach ($sentinelMenuItems as $menuItem)
+                        <option value="navigate|sentinel|{{ route($menuItem['route'], $parameters) }}">
+                            {{ $menuItem['label'] }}
+                        </option>
+                    @endforeach
+                </optgroup>
+            </select>
+        </div>
+
+        <div class="sub-menu-wrapper hidden md:flex">
+            @foreach ($sentinelMenuItems as $menuItem)
+                <a class="{{ $menuItem['active'] ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
+                    href="{{ route($menuItem['route'], $parameters) }}">
+                    <span class="menu-item-label">{{ $menuItem['label'] }}</span>
+                </a>
+            @endforeach
+        </div>
     @endcan
 </div>

resources/views/components/server/sidebar.blade.php

@@ -1,46 +1,201 @@
-<div class="sub-menu-wrapper">
-    <a class="sub-menu-item {{ $activeMenu === 'general' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-        href="{{ route('server.show', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">General</span></a>
-    @if ($server->isFunctional())
-        <a class="sub-menu-item {{ $activeMenu === 'advanced' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.advanced', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Advanced</span>
-        </a>
-    @endif
-    <a class="sub-menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-        href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Private Key</span>
-    </a>
-    @if ($server->hetzner_server_id)
-        <a class="sub-menu-item {{ $activeMenu === 'cloud-provider-token' ? 'menu-item-active' : '' }}"
-            {{ wireNavigate() }}
-            href="{{ route('server.cloud-provider-token', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Hetzner Token</span>
-        </a>
-    @endif
-    <a class="sub-menu-item {{ $activeMenu === 'ca-certificate' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-        href="{{ route('server.ca-certificate', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">CA Certificate</span>
-    </a>
-    @if (!$server->isLocalhost())
-        <a class="sub-menu-item {{ $activeMenu === 'cloudflare-tunnel' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.cloudflare-tunnel', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Cloudflare Tunnel</span></a>
-    @endif
-    @if ($server->isFunctional())
-        <a class="sub-menu-item {{ $activeMenu === 'docker-cleanup' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.docker-cleanup', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Docker Cleanup</span>
-        </a>
-        <a class="sub-menu-item {{ $activeMenu === 'destinations' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.destinations', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Destinations</span>
-        </a>
-        <a class="sub-menu-item {{ $activeMenu === 'log-drains' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.log-drains', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Log Drains</span></a>
-        <a class="sub-menu-item {{ $activeMenu === 'metrics' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.metrics', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Metrics</span></a>
-    @endif
-    @if (!$server->isBuildServer() && !$server->settings->is_cloudflare_tunnel)
-        <a class="sub-menu-item {{ $activeMenu === 'swarm' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.swarm', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Swarm</span>
-        </a>
-    @endif
-    @if (!$server->isLocalhost())
-        <a class="sub-menu-item {{ $activeMenu === 'danger' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.delete', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Danger</span></a>
-    @endif
+@php
+    $serverRouteParameters = ['server_uuid' => $server->uuid];
+    $serverPageItems = [
+        [
+            'label' => 'Configuration',
+            'route' => 'server.show',
+            'active' => request()->routeIs('server.show', 'server.advanced', 'server.private-key', 'server.cloud-provider-token', 'server.ca-certificate', 'server.cloudflare-tunnel', 'server.docker-cleanup', 'server.destinations', 'server.log-drains', 'server.metrics', 'server.swarm', 'server.delete'),
+        ],
+        [
+            'label' => 'Proxy',
+            'route' => 'server.proxy',
+            'active' => request()->routeIs('server.proxy', 'server.proxy.*'),
+            'visible' => ! $server->isSwarmWorker() && ! $server->settings->is_build_server,
+        ],
+        [
+            'label' => 'Sentinel',
+            'route' => 'server.sentinel',
+            'active' => request()->routeIs('server.sentinel', 'server.sentinel.*'),
+            'visible' => $server->isFunctional() && ! $server->isSwarm() && ! $server->settings->is_build_server && auth()->user()?->can('viewSentinel', $server),
+        ],
+        [
+            'label' => 'Resources',
+            'route' => 'server.resources',
+            'active' => request()->routeIs('server.resources'),
+        ],
+        [
+            'label' => 'Terminal',
+            'route' => 'server.command',
+            'active' => request()->routeIs('server.command'),
+            'navigate' => false,
+            'visible' => auth()->user()?->can('canAccessTerminal'),
+        ],
+        [
+            'label' => 'Security',
+            'route' => 'server.security.patches',
+            'active' => request()->routeIs('server.security.patches'),
+            'visible' => auth()->user()?->can('update', $server),
+        ],
+    ];
+    $serverMenuItems = [
+        [
+            'label' => 'General',
+            'route' => 'server.show',
+            'active' => $activeMenu === 'general',
+        ],
+        [
+            'label' => 'Advanced',
+            'route' => 'server.advanced',
+            'active' => $activeMenu === 'advanced',
+            'visible' => $server->isFunctional(),
+        ],
+        [
+            'label' => 'Private Key',
+            'route' => 'server.private-key',
+            'active' => $activeMenu === 'private-key',
+        ],
+        [
+            'label' => 'Hetzner Token',
+            'route' => 'server.cloud-provider-token',
+            'active' => $activeMenu === 'cloud-provider-token',
+            'visible' => (bool) $server->hetzner_server_id,
+        ],
+        [
+            'label' => 'CA Certificate',
+            'route' => 'server.ca-certificate',
+            'active' => $activeMenu === 'ca-certificate',
+        ],
+        [
+            'label' => 'Cloudflare Tunnel',
+            'route' => 'server.cloudflare-tunnel',
+            'active' => $activeMenu === 'cloudflare-tunnel',
+            'visible' => ! $server->isLocalhost(),
+        ],
+        [
+            'label' => 'Docker Cleanup',
+            'route' => 'server.docker-cleanup',
+            'active' => $activeMenu === 'docker-cleanup',
+            'visible' => $server->isFunctional(),
+        ],
+        [
+            'label' => 'Destinations',
+            'route' => 'server.destinations',
+            'active' => $activeMenu === 'destinations',
+            'visible' => $server->isFunctional(),
+        ],
+        [
+            'label' => 'Log Drains',
+            'route' => 'server.log-drains',
+            'active' => $activeMenu === 'log-drains',
+            'visible' => $server->isFunctional(),
+        ],
+        [
+            'label' => 'Metrics',
+            'route' => 'server.metrics',
+            'active' => $activeMenu === 'metrics',
+            'visible' => $server->isFunctional(),
+        ],
+        [
+            'label' => 'Swarm',
+            'route' => 'server.swarm',
+            'active' => $activeMenu === 'swarm',
+            'visible' => ! $server->isBuildServer() && ! $server->settings->is_cloudflare_tunnel,
+        ],
+        [
+            'label' => 'Danger',
+            'route' => 'server.delete',
+            'active' => $activeMenu === 'danger',
+            'visible' => ! $server->isLocalhost(),
+        ],
+    ];
+
+    $serverPageItems = array_values(array_filter(
+        $serverPageItems,
+        fn (array $item): bool => $item['visible'] ?? true,
+    ));
+    $serverMenuItems = array_values(array_filter(
+        $serverMenuItems,
+        fn (array $item): bool => $item['visible'] ?? true,
+    ));
+    $activeServerMenuItem = collect($serverMenuItems)->firstWhere('active', true);
+    $activeServerPageItem = collect($serverPageItems)->firstWhere('active', true);
+    $activeServerMobileItem = $activeServerMenuItem ?? $activeServerPageItem ?? $serverMenuItems[0];
+    $activeServerMobileGroup = $activeServerMenuItem ? 'configuration' : 'server';
+    $activeServerMobileNavigation = ($activeServerMobileItem['navigate'] ?? true) ? 'navigate' : 'location';
+    $activeServerMenuValue = $activeServerMobileNavigation.'|'.$activeServerMobileGroup.'|'.route($activeServerMobileItem['route'], $serverRouteParameters);
+@endphp
+
+<div class="w-full md:w-auto">
+    <div class="mb-4 w-full border-b-2 border-solid border-neutral-200 pb-6 md:hidden dark:border-coolgray-200">
+        <label id="server-mobile-section-label" for="server-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
+        <select id="server-mobile-section" class="select w-full" aria-label="Server menu"
+            data-current-value="{{ $activeServerMenuValue }}"
+            x-data="{
+                init() {
+                    this.syncFromLocation();
+                    window.Livewire?.hook?.('morphed', ({ el }) => {
+                        if (el.contains(this.$el)) {
+                            queueMicrotask(() => this.syncFromLocation());
+                        }
+                    });
+                },
+                selected: $el.dataset.currentValue,
+                current: $el.dataset.currentValue,
+                syncFromLocation() {
+                    const currentUrl = new URL(window.location.href);
+                    const selectedOption = Array.from(this.$el.options).find((option) => {
+                        if (!option.value.startsWith('navigate|') && !option.value.startsWith('location|')) {
+                            return false;
+                        }
+
+                        const optionUrl = new URL(option.value.split('|').slice(2).join('|'), window.location.origin);
+
+                        return optionUrl.pathname === currentUrl.pathname;
+                    });
+
+                    if (selectedOption) {
+                        this.current = selectedOption.value;
+                        this.selected = selectedOption.value;
+                    }
+                },
+            }"
+            x-on:livewire:navigated.window="syncFromLocation()"
+            x-model="selected"
+            x-on:change="
+                const value = $event.target.value;
+
+                if (value.startsWith('navigate|')) {
+                    const url = value.split('|').slice(2).join('|');
+                    window.Livewire?.navigate ? window.Livewire.navigate(url) : window.location.href = url;
+                    return;
+                }
+
+                if (value.startsWith('location|')) {
+                    const url = value.split('|').slice(2).join('|');
+                    window.location.href = url;
+                }
+            ">
+            <optgroup label="Server">
+                @foreach ($serverPageItems as $menuItem)
+                    <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|server|{{ route($menuItem['route'], $serverRouteParameters) }}">
+                        {{ $menuItem['label'] }}
+                    </option>
+                @endforeach
+            </optgroup>
+            <optgroup label="Configuration">
+                @foreach ($serverMenuItems as $menuItem)
+                    <option value="navigate|configuration|{{ route($menuItem['route'], $serverRouteParameters) }}">
+                        {{ $menuItem['label'] }}
+                    </option>
+                @endforeach
+            </optgroup>
+        </select>
+    </div>
+
+    <div class="sub-menu-wrapper hidden md:flex">
+        @foreach ($serverMenuItems as $menuItem)
+            <a class="sub-menu-item {{ $menuItem['active'] ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
+                href="{{ route($menuItem['route'], $serverRouteParameters) }}"><span class="menu-item-label">{{ $menuItem['label'] }}</span></a>
+        @endforeach
+    </div>
 </div>

resources/views/livewire/project/application/configuration.blade.php

@@ -112,7 +112,7 @@
         ));
     @endphp
 
-    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <div class="sub-menu-wrapper hidden md:flex">
             @foreach ($configurationMenuItems as $menuItem)
                 <a @class([

resources/views/livewire/project/database/configuration.blade.php

@@ -5,7 +5,7 @@
     <h1>Configuration</h1>
     <livewire:project.shared.configuration-checker :resource="$database" />
     <livewire:project.database.heading :database="$database" />
-    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <div class="sub-menu-wrapper hidden md:flex">
             <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.database.configuration', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"><span class="menu-item-label">General</span></a>

resources/views/livewire/project/service/configuration.blade.php

@@ -4,7 +4,7 @@
     </x-slot>
     <livewire:project.service.heading :service="$service" :parameters="$parameters" :query="$query" />
 
-    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <div class="sub-menu-wrapper hidden md:flex">
             <a class="sub-menu-item" target="_blank" href="{{ $service->documentation() }}"><span class="menu-item-label">Documentation</span>
                 <x-external-link /></a>

resources/views/livewire/project/service/database-backups.blade.php

@@ -1,6 +1,6 @@
 <div>
     <livewire:project.service.heading :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-service-database.sidebar :parameters="$parameters" :serviceDatabase="$serviceDatabase" :isImportSupported="$isImportSupported" />
         <div class="w-full">
             <x-slot:title>

resources/views/livewire/project/service/index.blade.php

@@ -1,6 +1,6 @@
 <div>
     <livewire:project.service.heading :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         @if ($resourceType === 'database')
             <x-service-database.sidebar :parameters="$parameters" :serviceDatabase="$serviceDatabase" :isImportSupported="$isImportSupported" />
         @else

resources/views/livewire/server/advanced.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Advanced | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="advanced" />
         <form wire:submit='submit' class="w-full">
             <div>
@@ -37,7 +37,7 @@
                             helper="You can specify the number of simultaneous build processes/deployments that should run concurrently." />
                         <x-forms.input canGate="update" :canResource="$server" id="dynamicTimeout"
                             type="number" min="1"
-                            label="Deployment timeout (seconds)" required
+                            label="Deployment timeout (sec)" required
                             helper="You can define the maximum duration for a deployment to run before timing it out." />
                         <x-forms.input canGate="update" :canResource="$server" id="deploymentQueueLimit"
                             type="number" min="1"

resources/views/livewire/server/ca-certificate/show.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > CA Certificate | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="ca-certificate" />
         <div class="flex flex-col gap-4">
             <div class="flex items-center gap-2">

resources/views/livewire/server/charts.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Metrics | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="metrics" />
         <div class="w-full">
             <div class="flex items-center gap-2">

resources/views/livewire/server/cloud-provider-token/show.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Hetzner Token | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="cloud-provider-token" />
         <div class="w-full">
             @if ($server->hetzner_server_id)

resources/views/livewire/server/cloudflare-tunnel.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Cloudflare Tunnel | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="cloudflare-tunnel" />
         <div class="w-full">
             <div class="flex flex-col">

resources/views/livewire/server/delete.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Delete Server | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="danger" />
         <div class="w-full">
             @if ($server->id !== 0)

resources/views/livewire/server/destinations.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Destinations | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="destinations" />
         <div class="w-full">
             @if ($server->isFunctional())

resources/views/livewire/server/docker-cleanup.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Docker Cleanup | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="docker-cleanup" />
         <div class="w-full">
             <form wire:submit='submit'>

resources/views/livewire/server/log-drains.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Log Drains | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="log-drains" />
         <div class="w-full">
             @if ($server->isFunctional())

resources/views/livewire/server/navbar.blade.php

@@ -1,4 +1,4 @@
-<div class="pb-6">
+<div class="pb-0 md:pb-6">
     <x-slide-over @startproxy.window="slideOverOpen = true" fullScreen closeWithX>
         <x-slot:title>Proxy Startup Logs</x-slot:title>
         <x-slot:content>
@@ -12,14 +12,17 @@
             <livewire:activity-monitor header="Logs" fullHeight />
         </x-slot:content>
     </x-slide-over>
-    <div class="flex flex-col gap-1.5">
-        <div class="flex flex-wrap items-center gap-2">
-            <h1>Server</h1>
+        <h1>Server</h1>
+    <div class="pt-2 pb-4 md:pb-10">
+        <div class="flex-col md:flex-row flex gap-2">
+            <div data-testid="server-subtitle" class="text-xs lg:text-sm min-w-0 truncate">
+                {{ data_get($server, 'name') }}
+            </div>
             @php
                 $showSentinelStatus = $server->isFunctional() && $server->isSentinelEnabled();
             @endphp
             @if ($server->proxySet() || $showSentinelStatus)
-                <div data-testid="server-status-summary" class="flex flex-wrap items-center gap-2">
+                <div data-testid="server-status-summary" class="flex flex-wrap items-center gap-1">
                     @if ($server->proxySet())
                         <div class="flex items-center gap-1">
                             @if ($proxyStatus === 'running')
@@ -57,11 +60,10 @@
                 </div>
             @endif
         </div>
-        <div class="subtitle">{{ data_get($server, 'name') }}</div>
     </div>
     <div class="navbar-main">
         <nav
-            class="flex items-center gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap pt-2">
+            class="scrollbar hidden min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:flex md:w-auto md:overflow-visible">
             <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}" href="{{ route('server.show', [
     'server_uuid' => data_get($server, 'uuid'),
 ]) }}" {{ wireNavigate() }}>
@@ -114,12 +116,70 @@
                         </a>
             @endcan
         </nav>
-        <div class="order-first sm:order-last">
+        <div class="order-first w-full md:order-last md:w-auto">
             <div>
                 @if ($server->proxySet())
                     @can('manageProxy', $server)
+                    <div id="server-mobile-actions" class="mt-2 mb-3 md:hidden">
+                        <div class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Actions</div>
                     @if ($proxyStatus === 'running')
-                            <div class="flex gap-2">
+                            <div class="flex flex-nowrap gap-2 overflow-x-auto">
+                                <button type="button" class="button shrink-0"
+                                    @click="document.getElementById('server-mobile-restart-proxy-trigger')?.click()">
+                                    <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                            stroke-width="2">
+                                            <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                            <path d="M20 4v5h-5" />
+                                        </g>
+                                    </svg>
+                                    Restart Proxy
+                                </button>
+                                <button type="button" class="button shrink-0 text-error"
+                                    @click="document.getElementById('server-mobile-stop-proxy-trigger')?.click()">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                        stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                        <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                        </path>
+                                        <path
+                                            d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                        </path>
+                                    </svg>
+                                    Stop Proxy
+                                </button>
+                                @if ($traefikDashboardAvailable)
+                                    <a class="button shrink-0" target="_blank" href="http://{{ $serverIp }}:8080">
+                                        Traefik Dashboard
+                                        <x-external-link />
+                                    </a>
+                                @endif
+                            </div>
+                    </div>
+                            <x-modal-confirmation title="Confirm Proxy Restart?" buttonTitle="Restart Proxy"
+                                submitAction="restart" :actions="[
+                        'This proxy will be stopped and started again.',
+                        'All resources hosted on coolify will be unavailable during the restart.',
+                    ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Proxy"
+                                :dispatchEvent="true" dispatchEventType="restartEvent">
+                                <x-slot:trigger>
+                                    <button id="server-mobile-restart-proxy-trigger" type="button" class="hidden">Restart Proxy</button>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <x-modal-confirmation title="Confirm Proxy Stopping?" buttonTitle="Stop Proxy"
+                                submitAction="stop(true)" :actions="[
+                        'The coolify proxy will be stopped.',
+                        'All resources hosted on coolify will be unavailable.',
+                    ]" :confirmWithText="false"
+                                :confirmWithPassword="false" step2ButtonText="Stop Proxy" :dispatchEvent="true"
+                                dispatchEventType="stopEvent">
+                                <x-slot:trigger>
+                                    <button id="server-mobile-stop-proxy-trigger" type="button" class="hidden">Stop Proxy</button>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <div class="hidden gap-2 md:flex">
                                 <div class="mt-1" wire:loading wire:target="loadProxyConfiguration">
                                     <x-loading text="Checking Traefik dashboard" />
                                 </div>
@@ -181,6 +241,7 @@
                             </svg>
                             Start Proxy
                         </button>
+                    </div>
                     @endif
                     @endcan
                 @endif

resources/views/livewire/server/private-key/show.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Private Key | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="private-key" />
         <div class="w-full">
             <div class="flex items-end gap-2">

resources/views/livewire/server/proxy/dynamic-configurations.blade.php

@@ -3,7 +3,7 @@
         Proxy Dynamic Configuration | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar-proxy :server="$server" :parameters="$parameters" />
         @if ($server->isFunctional())
             <div class="w-full">

resources/views/livewire/server/proxy/logs.blade.php

@@ -3,7 +3,7 @@
         Proxy Logs | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar-proxy :server="$server" :parameters="$parameters" />
         <div class="w-full">
             <h2 class="pb-4">Logs</h2>

resources/views/livewire/server/proxy/show.blade.php

@@ -4,7 +4,7 @@
     </x-slot>
     <livewire:server.navbar :server="$server" />
     @if ($server->isFunctional())
-        <div class="flex flex-col h-full gap-8 sm:flex-row">
+        <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
             <x-server.sidebar-proxy :server="$server" :parameters="$parameters" />
             <div class="w-full">
                 <livewire:server.proxy :server="$server" />

resources/views/livewire/server/resources.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Server Resources | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div x-data="{ activeTab: 'managed' }" class="flex flex-col h-full gap-8 md:flex-row">
+    <div x-data="{ activeTab: 'managed' }" class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <div class="w-full">
             <div class="flex flex-col">
                 <div class="flex gap-2">

resources/views/livewire/server/security/patches.blade.php

@@ -10,7 +10,7 @@
         </x-slot:content>
     </x-slide-over>
 
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar-security :server="$server" :parameters="$parameters" />
         <form wire:submit='submit' class="w-full">
             <div>

resources/views/livewire/server/security/terminal-access.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Terminal Access | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar-security :server="$server" :parameters="$parameters" />
         <div class="w-full">
              <div>
@@ -52,4 +52,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

resources/views/livewire/server/sentinel/logs.blade.php

@@ -3,7 +3,7 @@
         Sentinel Logs | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar-sentinel :server="$server" :parameters="$parameters" />
         <div class="w-full">
             <h2 class="pb-4">Logs</h2>

resources/views/livewire/server/sentinel/show.blade.php

@@ -4,7 +4,7 @@
     </x-slot>
     <livewire:server.navbar :server="$server" />
     @if ($server->isFunctional())
-        <div class="flex flex-col h-full gap-8 sm:flex-row">
+        <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
             <x-server.sidebar-sentinel :server="$server" :parameters="$parameters" />
             <div class="w-full">
                 <livewire:server.sentinel :server="$server" />

resources/views/livewire/server/show.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > General | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="general" />
         <div class="w-full">
             <form wire:submit.prevent='submit' class="flex flex-col">

resources/views/livewire/server/swarm.blade.php

@@ -3,7 +3,7 @@
         {{ data_get_str($server, 'name')->limit(10) }} > Swarm | Coolify
     </x-slot>
     <livewire:server.navbar :server="$server" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-2 md:gap-8 md:flex-row">
         <x-server.sidebar :server="$server" activeMenu="swarm" />
         <div class="w-full">
             <div>