From 692047e4c81d2072e2b88d407d5f801e66934df3 Mon Sep 17 00:00:00 2001
From: Ibrahim H <bitsnaps@yahoo.fr>
Date: Thu, 2 May 2024 19:11:46 +0100
Subject: [PATCH 01/29] fixt: env file

---
 .gitpod.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.gitpod.yml b/.gitpod.yml
index 228f1b94c..6fd6797b5 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -3,7 +3,7 @@ tasks:
     # Fix because of https://github.com/gitpod-io/gitpod/issues/16614
     before: sudo curl -o /usr/local/bin/docker-compose -fsSL https://github.com/docker/compose/releases/download/v2.16.0/docker-compose-linux-$(uname -m)
     init: |
-      cp .env.example .env &&
+      cp .env.development.example .env &&
       sed -i "s#APP_URL=http://localhost#APP_URL=$(gp url 8000)#g" .env
       sed -i "s#USERID=#USERID=33333#g" .env
       sed -i "s#GROUPID=#GROUPID=33333#g" .env
@@ -20,7 +20,7 @@ tasks:
       echo "Waiting for Sail environment to boot up."
       gp sync-await spin-is-ready
       ./vendor/bin/spin exec vite npm install
-      ./vendor/bin/spin exec vite npm run dev
+      ./vendor/bin/spin exec vite npm run dev -- --host
 
   - name: Laravel Queue Worker, listening to code changes
     command: |

From c901ace21ae4fad0b6e70b8206ac40fe6ff232f0 Mon Sep 17 00:00:00 2001
From: Luciano Laratelli <luciano@laratel.li>
Date: Fri, 3 May 2024 09:31:05 -0400
Subject: [PATCH 02/29] don't append '.git' for sr.ht repositories

---
 app/Livewire/Project/New/PublicGitRepository.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/Livewire/Project/New/PublicGitRepository.php b/app/Livewire/Project/New/PublicGitRepository.php
index c6c699acf..b71a0b670 100644
--- a/app/Livewire/Project/New/PublicGitRepository.php
+++ b/app/Livewire/Project/New/PublicGitRepository.php
@@ -98,7 +98,8 @@ class PublicGitRepository extends Component
                 (str($this->repository_url)->startsWith('https://') ||
                     str($this->repository_url)->startsWith('http://')) &&
                 !str($this->repository_url)->endsWith('.git') &&
-                !str($this->repository_url)->contains('github.com')
+                (!str($this->repository_url)->contains('github.com') ||
+                    !str($this->repository_url)->contains('git.sr.ht'))
             ) {
                 $this->repository_url = $this->repository_url . '.git';
             }

From d71682a3f7bad7af4811213f8448ec752d9d7ab0 Mon Sep 17 00:00:00 2001
From: Chiko <53100578+chikof@users.noreply.github.com>
Date: Fri, 3 May 2024 15:06:06 +0100
Subject: [PATCH 03/29] Change of wording

---
 resources/views/livewire/settings/configuration.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/livewire/settings/configuration.blade.php b/resources/views/livewire/settings/configuration.blade.php
index a7292f624..dbcf79552 100644
--- a/resources/views/livewire/settings/configuration.blade.php
+++ b/resources/views/livewire/settings/configuration.blade.php
@@ -38,7 +38,7 @@
                 id="next_channel" label="Enable pre-release (early) updates" />
         @else
             <x-forms.checkbox disabled instantSave
-                helper="Currently disabled. Do not recommended, only if you like to live on the edge." id="next_channel"
+                helper="Currently disabled. Not recommended. Only if you like to live on the edge." id="next_channel"
                 label="Enable pre-release (early) updates" />
         @endif
     </div>

From a86d13632e484deb5fa1003ccd10248655a62b37 Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Fri, 3 May 2024 14:49:41 +0000
Subject: [PATCH 04/29] Format foar a correct tailwind positioning of classes
 and eliminated usless spaces.

---
 resources/css/app.css | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 1f218490d..d6fcf2cb6 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -32,7 +32,7 @@ body {
     @apply block w-full py-1.5 rounded border-0 text-sm ring-1 ring-inset;
 }
 
-.input[type='password'] {
+.input[type="password"] {
     @apply pr-10;
 }
 
@@ -52,7 +52,6 @@ button[isHighlighted]:not(:disabled) {
     @apply text-white bg-coollabs hover:bg-coollabs-100;
 }
 
-
 h1 {
     @apply text-2xl font-bold dark:text-white;
 }
@@ -78,7 +77,7 @@ label {
 }
 
 table {
-    @apply min-w-full divide-y dark:divide-coolgray-200 divide-neutral-300 ;
+    @apply min-w-full divide-y dark:divide-coolgray-200 divide-neutral-300;
 }
 
 thead {
@@ -117,7 +116,7 @@ tr td:first-child {
     @apply flex items-center gap-2 text-error;
 }
 .tag {
-    @apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200
+    @apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200;
 }
 .add-tag {
     @apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
@@ -135,7 +134,6 @@ tr td:first-child {
 
 .badge-absolute {
     @apply absolute top-0 right-0 w-2 h-2 border-none rounded-t-none rounded-r-none;
-
 }
 
 .badge-success {
@@ -174,7 +172,6 @@ tr td:first-child {
     @apply w-6 h-6 dark:hover:text-white;
 }
 
-
 .scrollbar {
     @apply scrollbar-thumb-coollabs-100 dark:scrollbar-track-coolgray-200 scrollbar-track-neutral-200 scrollbar-w-2;
 }
@@ -203,20 +200,19 @@ tr td:first-child {
     @apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
 }
 .box-boarding {
-    @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black  ;
+    @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black;
 }
 .box-without-bg {
     @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem]   border border-neutral-200 dark:border-black;
 }
 .box-without-bg-without-border {
-    @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem]   ;
+    @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
 }
 
 .on-box {
     @apply rounded hover:bg-neutral-300 dark:hover:bg-coolgray-500/20;
 }
 
-
 .box-title {
     @apply font-bold text-black dark:text-white group-hover:dark:text-white;
 }

From 0cddce7a3720d7bd0bc0ffb0ba0aadb86e1c3ec7 Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Fri, 3 May 2024 14:51:08 +0000
Subject: [PATCH 05/29] Changed the navbar-main class to utilize
 overflow-x-scroll, preventing the page from overflowing entirely.

---
 resources/css/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index d6fcf2cb6..377af4e88 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -185,7 +185,7 @@ tr td:first-child {
 }
 
 .navbar-main {
-    @apply flex items-center h-10 gap-6 pb-2 border-b-2 border-solid dark:border-coolgray-200;
+    @apply flex items-center h-fit gap-6 pb-2 border-b-2 border-solid dark:border-coolgray-200 overflow-x-scroll min-h-10;
 }
 
 .loading {

From be4386658a7f1dd072a6b4dbf237865a71fac206 Mon Sep 17 00:00:00 2001
From: Ikko Eltociear Ashimine <eltociear@gmail.com>
Date: Sat, 4 May 2024 01:23:31 +0900
Subject: [PATCH 06/29] fix: typo in tags.blade.php

seperated -> separated
---
 resources/views/livewire/project/shared/tags.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/livewire/project/shared/tags.blade.php b/resources/views/livewire/project/shared/tags.blade.php
index 2d4240dfa..0de2540fd 100644
--- a/resources/views/livewire/project/shared/tags.blade.php
+++ b/resources/views/livewire/project/shared/tags.blade.php
@@ -21,7 +21,7 @@
     <form wire:submit='submit' class="flex items-end gap-2 pt-4">
         <div class="w-64">
             <x-forms.input label="Create new or assign existing tags"
-                helper="You add more at once with space seperated list: web api something<br><br>If the tag does not exists, it will be created."
+                helper="You add more at once with space separated list: web api something<br><br>If the tag does not exists, it will be created."
                 wire:model="new_tag" />
         </div>
         <x-forms.button type="submit">Add</x-forms.button>

From efa5091b9826216df0459346e9deccb82ee9de01 Mon Sep 17 00:00:00 2001
From: "sipc.ink" <admin@sipc.ink>
Date: Sun, 5 May 2024 21:07:49 +0800
Subject: [PATCH 07/29] Create zh-cn.json

---
 lang/zh-cn.json | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 lang/zh-cn.json

diff --git a/lang/zh-cn.json b/lang/zh-cn.json
new file mode 100644
index 000000000..70c457fa8
--- /dev/null
+++ b/lang/zh-cn.json
@@ -0,0 +1,30 @@
+{
+    "auth.login": "登录",
+    "auth.login.azure": "使用 Microsoft 登录",
+    "auth.login.bitbucket": "使用 Bitbucket 登录",
+    "auth.login.github": "使用 GitHub 登录",
+    "auth.login.gitlab": "使用 Gitlab 登录",
+    "auth.login.google": "使用 Google 登录",
+    "auth.already_registered": "已经注册？",
+    "auth.confirm_password": "确认密码",
+    "auth.forgot_password": "忘记密码",
+    "auth.forgot_password_send_email": "发送密码重置邮件",
+    "auth.register_now": "注册",
+    "auth.logout": "退出登录",
+    "auth.register": "注册",
+    "auth.registration_disabled": "注册已禁用，请联系管理员",
+    "auth.reset_password": "重置密码",
+    "auth.failed": "这些凭据与我们的记录不符",
+    "auth.failed.callback": "处理第三方登录的回调时出错",
+    "auth.failed.password": "密码错误",
+    "auth.failed.email": "该账户未注册",
+    "auth.throttle": "登录次数过多，请在 :seconds 秒后重试",
+    "input.name": "用户名",
+    "input.email": "邮箱",
+    "input.password": "密码",
+    "input.password.again": "确认密码",
+    "input.code": "验证码",
+    "input.recovery_code": "恢复码",
+    "button.save": "保存",
+    "repository.url": "<span class='text-helper'>示例</span><br>对于公共代码仓库，请使用 <span class='text-helper'>https://...</span>。<br>对于私有代码仓库，请使用 <span class='text-helper'>git@...</span>。<br><br>https://github.com/coollabsio/coolify-examples <span class='text-helper'>main</span> 分支将被选择<br>https://github.com/coollabsio/coolify-examples/tree/nodejs-fastify <span class='text-helper'>nodejs-fastify</span> 分支将被选择。<br>https://gitea.com/sedlav/expressjs.git <span class='text-helper'>main</span> 分支将被选择。<br>https://gitlab.com/andrasbacsai/nodejs-example.git <span class='text-helper'>main</span> 分支将被选择"
+}

From 1a5fec39c07d0d0e24fa98f619a862a2e7be5193 Mon Sep 17 00:00:00 2001
From: "sipc.ink" <admin@sipc.ink>
Date: Sun, 5 May 2024 21:11:44 +0800
Subject: [PATCH 08/29] fix: install.sh error

---
 scripts/install.sh | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/install.sh b/scripts/install.sh
index f377c85bc..588afc243 100644
--- a/scripts/install.sh
+++ b/scripts/install.sh
@@ -73,6 +73,9 @@ centos | fedora | rhel | ol | rocky | almalinux | amzn)
     if [ "$OS_TYPE" = "amzn" ]; then
         dnf install -y wget git jq >/dev/null 2>&1
     else
+        if ! command -v dnf >/dev/null 2>&1; then
+            yum install -y dnf >/dev/null 2>&1
+        fi
         dnf install -y curl wget git jq >/dev/null 2>&1
     fi
     ;;

From 6102e441d6a1f23fef6fa2fbfee6549802fedffb Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 15:23:25 +0000
Subject: [PATCH 09/29] In small screen the submenu is moved up, under the
 navbar-main

---
 resources/css/app.css                                       | 2 +-
 .../livewire/project/application/configuration.blade.php    | 6 +++---
 .../views/livewire/project/database/configuration.blade.php | 6 +++---
 .../views/livewire/project/service/configuration.blade.php  | 4 ++--
 resources/views/livewire/project/service/index.blade.php    | 6 +++---
 resources/views/livewire/server/resources.blade.php         | 6 +++---
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 377af4e88..aaa717700 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -157,7 +157,7 @@ tr td:first-child {
 }
 
 .menu-item {
-    @apply flex items-center w-full gap-3 py-1 pl-2 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
+    @apply flex items-center w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
 }
 
 .menu-item-active {
diff --git a/resources/views/livewire/project/application/configuration.blade.php b/resources/views/livewire/project/application/configuration.blade.php
index 4aaf96569..c93080183 100644
--- a/resources/views/livewire/project/application/configuration.blade.php
+++ b/resources/views/livewire/project/application/configuration.blade.php
@@ -2,8 +2,8 @@
     <h1>Configuration</h1>
     <livewire:project.shared.configuration-checker :resource="$application" />
     <livewire:project.application.heading :application="$application" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
-        <div class="flex flex-col gap-2 xl:w-48">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
+        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
             <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
             @if ($application->destination->server->isSwarm())
@@ -78,7 +78,7 @@
                 @click.prevent="activeTab = 'danger'; window.location.hash = 'danger'" href="#">Danger Zone
             </a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'general'" class="h-full">
                 <livewire:project.application.general :application="$application" />
             </div>
diff --git a/resources/views/livewire/project/database/configuration.blade.php b/resources/views/livewire/project/database/configuration.blade.php
index 1a69781da..dd3e05349 100644
--- a/resources/views/livewire/project/database/configuration.blade.php
+++ b/resources/views/livewire/project/database/configuration.blade.php
@@ -2,8 +2,8 @@
     <h1>Configuration</h1>
     <livewire:project.shared.configuration-checker :resource="$database" />
     <livewire:project.database.heading :database="$database" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
-        <div class="flex flex-col gap-4 min-w-fit">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
+        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
             <a :class="activeTab === 'general' && 'dark:text-white'"
                 @click.prevent="activeTab = 'general';
                 window.location.hash = 'general'"
@@ -48,7 +48,7 @@
                 href="#">Danger Zone
             </a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'general'" class="h-full">
                 @if ($database->type() === 'standalone-postgresql')
                     <livewire:project.database.postgresql.general :database="$database" />
diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
index 3c0e113e4..94bcfaa15 100644
--- a/resources/views/livewire/project/service/configuration.blade.php
+++ b/resources/views/livewire/project/service/configuration.blade.php
@@ -1,6 +1,6 @@
 <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.check_status" wire:poll.5000ms="check_status">
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex h-full pt-6">
+    <div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
         <div class="flex flex-col items-start gap-4 min-w-fit">
             <a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>
             <a :class="activeTab === 'service-stack' && 'dark:text-white'"
@@ -39,7 +39,7 @@
                 href="#">Danger Zone
             </a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'service-stack'">
                 <livewire:project.service.stack-form :service="$service" />
                 <h3>Services</h3>
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
index 563625305..098a751bb 100644
--- a/resources/views/livewire/project/service/index.blade.php
+++ b/resources/views/livewire/project/service/index.blade.php
@@ -1,7 +1,7 @@
 <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }">
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex h-full pt-6">
-        <div class="flex flex-col gap-4 min-w-fit">
+    <div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
+        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
             <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
                 <button><- Back</button>
@@ -24,7 +24,7 @@
                     @click.prevent="activeTab = 'backups'; window.location.hash = 'backups'" href="#">Backups</a>
             @endif
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             @isset($serviceApplication)
                 <div x-cloak x-show="activeTab === 'general'" class="h-full">
                     <livewire:project.service.service-application-view :application="$serviceApplication" />
diff --git a/resources/views/livewire/server/resources.blade.php b/resources/views/livewire/server/resources.blade.php
index 8c888b131..a5ff69ea1 100644
--- a/resources/views/livewire/server/resources.blade.php
+++ b/resources/views/livewire/server/resources.blade.php
@@ -1,13 +1,13 @@
 <div>
     <x-server.navbar :server="$server" :parameters="$parameters" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
-        <div class="flex flex-col gap-4">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full flex-col md:flex-row gap-8">
+        <div class="flex md:flex-col gap-4 flex-row">
             <a :class="activeTab === 'managed' && 'dark:text-white'"
                 @click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
             <a :class="activeTab === 'unmanaged' && 'dark:text-white'"
                 @click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'" href="#">Unmanaged</a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'managed'" class="h-full">
                 <div class="flex flex-col">
                     <div class="flex gap-2">

From d52aac76c08015a397725757d44ce50899a6d5e3 Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 15:55:58 +0000
Subject: [PATCH 10/29] Changed the breadcrumbs for let it using flex-wrap

---
 .../resources/breadcrumbs.blade.php           | 37 +++++++++----------
 .../project/environment-edit.blade.php        | 20 +++++++---
 .../livewire/project/resource/index.blade.php |  3 +-
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/resources/views/components/resources/breadcrumbs.blade.php b/resources/views/components/resources/breadcrumbs.blade.php
index 5b0956c93..1e5aaa997 100644
--- a/resources/views/components/resources/breadcrumbs.blade.php
+++ b/resources/views/components/resources/breadcrumbs.blade.php
@@ -1,35 +1,34 @@
 <nav class="flex pt-2 pb-10">
-    <ol class="flex items-center">
+    <ol class="flex items-center flex-wrap gap-y-1">
         <li class="inline-flex items-center">
-            <a wire:navigate class="text-xs truncate lg:text-sm"
-                href="{{ route('project.show', ['project_uuid' => $this->parameters['project_uuid']]) }}">
-                {{ data_get($resource, 'environment.project.name', 'Undefined Name') }}</a>
-        </li>
-        <li>
-            <div class="flex items-center">
-                <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor" viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd"
-                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                        clip-rule="evenodd"></path>
-                </svg>
-                <a class="text-xs truncate lg:text-sm"
-                    href="{{ route('project.resource.index', ['environment_name' => $this->parameters['environment_name'], 'project_uuid' => $this->parameters['project_uuid']]) }}">{{ $this->parameters['environment_name'] }}</a>
-            </div>
-        </li>
-        <li>
             <div class="flex items-center">
+                <a wire:navigate class="text-xs truncate lg:text-sm"
+                    href="{{ route('project.show', ['project_uuid' => $this->parameters['project_uuid']]) }}">
+                    {{ data_get($resource, 'environment.project.name', 'Undefined Name') }}</a>
                 <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
                     viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd"
                         d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                         clip-rule="evenodd"></path>
                 </svg>
-                <span class="text-xs truncate lg:text-sm">{{ data_get($resource, 'name') }}</span>
             </div>
         </li>
         <li>
             <div class="flex items-center">
+
+                <a class="text-xs truncate lg:text-sm"
+                    href="{{ route('project.resource.index', ['environment_name' => $this->parameters['environment_name'], 'project_uuid' => $this->parameters['project_uuid']]) }}">{{ $this->parameters['environment_name'] }}</a>
+                <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
+                    viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd"
+                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                        clip-rule="evenodd"></path>
+                </svg>
+            </div>
+        </li>
+        <li>
+            <div class="flex items-center">
+                <span class="text-xs truncate lg:text-sm">{{ data_get($resource, 'name') }}</span>
                 <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
                     viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd"
diff --git a/resources/views/livewire/project/environment-edit.blade.php b/resources/views/livewire/project/environment-edit.blade.php
index 6439a128d..842692296 100644
--- a/resources/views/livewire/project/environment-edit.blade.php
+++ b/resources/views/livewire/project/environment-edit.blade.php
@@ -6,22 +6,30 @@
             <livewire:project.delete-environment :disabled="!$environment->isEmpty()" :environment_id="$environment->id" />
         </div>
         <nav class="flex pt-2 pb-10">
-            <ol class="flex items-center">
+            <ol class="flex items-center flex-wrap gap-y-1">
                 <li class="inline-flex items-center">
-                    <a class="text-xs truncate lg:text-sm"
-                        href="{{ route('project.show', ['project_uuid' => data_get($parameters, 'project_uuid')]) }}">
-                        {{ $project->name }}</a>
-                </li>
-                <li>
                     <div class="flex items-center">
+                        <a class="text-xs truncate lg:text-sm"
+                            href="{{ route('project.show', ['project_uuid' => data_get($parameters, 'project_uuid')]) }}">
+                            {{ $project->name }}</a>
                         <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
                             viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd"
                                 d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                 clip-rule="evenodd"></path>
                         </svg>
+                    </div>
+                </li>
+                <li>
+                    <div class="flex items-center">
                         <a class="text-xs truncate lg:text-sm"
                             href="{{ route('project.resource.index', ['environment_name' => data_get($parameters, 'environment_name'), 'project_uuid' => data_get($parameters, 'project_uuid')]) }}">{{ data_get($parameters, 'environment_name') }}</a>
+                        <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
+                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd"
+                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                clip-rule="evenodd"></path>
+                        </svg>
                     </div>
                 </li>
                 <li>
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index 8a66bc645..96c93c3e5 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -71,7 +71,8 @@
                                 <div class="max-w-full px-4 truncate box-description" x-text="item.fqdn"></div>
                             </div>
                         </a>
-                        <div class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
+                        <div
+                            class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
                             <template x-for="tag in item.tags">
                                 <div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>

From 91dbf1f01a5721d46f17738da9da955293cd658b Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 16:33:52 +0000
Subject: [PATCH 11/29] navbar changed in order top move as first element the
 button for start/redeploy

---
 resources/css/app.css                         |   4 +-
 .../components/notification/navbar.blade.php  |  30 +++--
 .../components/security/navbar.blade.php      |  18 +--
 .../views/components/server/navbar.blade.php  |  70 +++++-----
 .../components/settings/navbar.blade.php      |  26 ++--
 .../views/components/team/navbar.blade.php    |  22 ++--
 .../project/application/general.blade.php     |   2 +-
 .../project/application/heading.blade.php     |  34 ++---
 .../project/database/heading.blade.php        | 121 +++++++++---------
 .../livewire/project/service/navbar.blade.php |  15 ++-
 10 files changed, 179 insertions(+), 163 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index aaa717700..fd3e1d174 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -157,7 +157,7 @@ tr td:first-child {
 }
 
 .menu-item {
-    @apply flex items-center w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
+    @apply flex items-center text-sm w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
 }
 
 .menu-item-active {
@@ -185,7 +185,7 @@ tr td:first-child {
 }
 
 .navbar-main {
-    @apply flex items-center h-fit gap-6 pb-2 border-b-2 border-solid dark:border-coolgray-200 overflow-x-scroll min-h-10;
+    @apply flex h-fit flex-col sm:flex-row justify-items-start sm:justify-between gap-4 pb-2 border-b-2 border-solid dark:border-coolgray-200 sm:items-center;
 }
 
 .loading {
diff --git a/resources/views/components/notification/navbar.blade.php b/resources/views/components/notification/navbar.blade.php
index 24b4fecfd..50e8ae89d 100644
--- a/resources/views/components/notification/navbar.blade.php
+++ b/resources/views/components/notification/navbar.blade.php
@@ -1,18 +1,20 @@
 <div class="pb-6">
     <h1>Notifications</h1>
     <div class="subtitle">Get notified about your infrastructure.</div>
-    <nav class="navbar-main">
-        <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
-            href="{{ route('notifications.email') }}">
-            <button>Email</button>
-        </a>
-        <a class="{{ request()->routeIs('notifications.telegram') ? 'dark:text-white' : '' }}"
-            href="{{ route('notifications.telegram') }}">
-            <button>Telegram</button>
-        </a>
-        <a class="{{ request()->routeIs('notifications.discord') ? 'dark:text-white' : '' }}"
-            href="{{ route('notifications.discord') }}">
-            <button>Discord</button>
-        </a>
-    </nav>
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
+                href="{{ route('notifications.email') }}">
+                <button>Email</button>
+            </a>
+            <a class="{{ request()->routeIs('notifications.telegram') ? 'dark:text-white' : '' }}"
+                href="{{ route('notifications.telegram') }}">
+                <button>Telegram</button>
+            </a>
+            <a class="{{ request()->routeIs('notifications.discord') ? 'dark:text-white' : '' }}"
+                href="{{ route('notifications.discord') }}">
+                <button>Discord</button>
+            </a>
+        </nav>
+    </div>
 </div>
diff --git a/resources/views/components/security/navbar.blade.php b/resources/views/components/security/navbar.blade.php
index 5ad4afb3c..e3add9776 100644
--- a/resources/views/components/security/navbar.blade.php
+++ b/resources/views/components/security/navbar.blade.php
@@ -1,12 +1,14 @@
 <div class="pb-6">
     <h1>Security</h1>
     <div class="subtitle">Security related settings.</div>
-    <nav class="navbar-main">
-        <a  href="{{ route('security.private-key.index') }}">
-            <button>Private Keys</button>
-        </a>
-        <a  href="{{ route('security.api-tokens') }}">
-            <button>API tokens</button>
-        </a>
-    </nav>
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a href="{{ route('security.private-key.index') }}">
+                <button>Private Keys</button>
+            </a>
+            <a href="{{ route('security.api-tokens') }}">
+                <button>API tokens</button>
+            </a>
+        </nav>
+    </div>
 </div>
diff --git a/resources/views/components/server/navbar.blade.php b/resources/views/components/server/navbar.blade.php
index 2130d0031..6d23af891 100644
--- a/resources/views/components/server/navbar.blade.php
+++ b/resources/views/components/server/navbar.blade.php
@@ -5,47 +5,49 @@
         <livewire:server.proxy.status :server="$server" />
     </div>
     <div class="subtitle">{{ data_get($server, 'name') }}.</div>
-    <nav class="navbar-main">
-        <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
-            href="{{ route('server.show', [
-                'server_uuid' => data_get($parameters, 'server_uuid'),
-            ]) }}">
-            <button>General</button>
-        </a>
-        <a class="{{ request()->routeIs('server.private-key') ? 'dark:text-white' : '' }}"
-            href="{{ route('server.private-key', [
-                'server_uuid' => data_get($parameters, 'server_uuid'),
-            ]) }}">
-            <button>Private Key</button>
-        </a>
-        <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
-            href="{{ route('server.resources', [
-                'server_uuid' => data_get($parameters, 'server_uuid'),
-            ]) }}">
-            <button>Resources</button>
-        </a>
-        @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
-            <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.proxy', [
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
+                href="{{ route('server.show', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
-                <button>Proxy</button>
+                <button>General</button>
             </a>
-            <a class="{{ request()->routeIs('server.destinations') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.destinations', [
+            <a class="{{ request()->routeIs('server.private-key') ? 'dark:text-white' : '' }}"
+                href="{{ route('server.private-key', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
-                <button>Destinations</button>
+                <button>Private Key</button>
             </a>
-            <a class="{{ request()->routeIs('server.log-drains') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.log-drains', [
+            <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
+                href="{{ route('server.resources', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
-                <button>Log Drains</button>
+                <button>Resources</button>
             </a>
-        @endif
-
-        <div class="flex-1"></div>
-        <livewire:server.proxy.deploy :server="$server" />
-    </nav>
+            @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
+                <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
+                    href="{{ route('server.proxy', [
+                        'server_uuid' => data_get($parameters, 'server_uuid'),
+                    ]) }}">
+                    <button>Proxy</button>
+                </a>
+                <a class="{{ request()->routeIs('server.destinations') ? 'dark:text-white' : '' }}"
+                    href="{{ route('server.destinations', [
+                        'server_uuid' => data_get($parameters, 'server_uuid'),
+                    ]) }}">
+                    <button>Destinations</button>
+                </a>
+                <a class="{{ request()->routeIs('server.log-drains') ? 'dark:text-white' : '' }}"
+                    href="{{ route('server.log-drains', [
+                        'server_uuid' => data_get($parameters, 'server_uuid'),
+                    ]) }}">
+                    <button>Log Drains</button>
+                </a>
+            @endif
+        </nav>
+        <div class="order-first sm:order-last">
+            <livewire:server.proxy.deploy :server="$server" />
+        </div>
+    </div>
 </div>
diff --git a/resources/views/components/settings/navbar.blade.php b/resources/views/components/settings/navbar.blade.php
index fc431d220..fff8cc4b8 100644
--- a/resources/views/components/settings/navbar.blade.php
+++ b/resources/views/components/settings/navbar.blade.php
@@ -1,17 +1,19 @@
 <div class="pb-5">
     <h1>Settings</h1>
     <div class="subtitle">Instance wide settings for Coolify.</div>
-    <nav class="navbar-main">
-        <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
-            href="{{ route('settings.index') }}">
-            <button>Configuration</button>
-        </a>
-        @if (isCloud())
-            <a class="{{ request()->routeIs('settings.license') ? 'dark:text-white' : '' }}"
-                href="{{ route('settings.license') }}">
-                <button>Resale License</button>
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
+                href="{{ route('settings.index') }}">
+                <button>Configuration</button>
             </a>
-        @endif
-        <div class="flex-1"></div>
-    </nav>
+            @if (isCloud())
+                <a class="{{ request()->routeIs('settings.license') ? 'dark:text-white' : '' }}"
+                    href="{{ route('settings.license') }}">
+                    <button>Resale License</button>
+                </a>
+            @endif
+            <div class="flex-1"></div>
+        </nav>
+    </div>
 </div>
diff --git a/resources/views/components/team/navbar.blade.php b/resources/views/components/team/navbar.blade.php
index 2c38d9695..d5fe82f95 100644
--- a/resources/views/components/team/navbar.blade.php
+++ b/resources/views/components/team/navbar.blade.php
@@ -6,14 +6,16 @@
         </x-modal-input>
     </div>
     <div class="subtitle">Team wide configurations.</div>
-    <nav class="navbar-main">
-        <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
-            <button>General</button>
-        </a>
-        <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}"
-            href="{{ route('team.member.index') }}">
-            <button>Members</button>
-        </a>
-        <div class="flex-1"></div>
-    </nav>
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
+                <button>General</button>
+            </a>
+            <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}"
+                href="{{ route('team.member.index') }}">
+                <button>Members</button>
+            </a>
+            <div class="flex-1"></div>
+        </nav>
+    </div>
 </div>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index c6aa05813..1f112288a 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -116,7 +116,7 @@
             @if ($application->build_pack !== 'dockerimage')
                 <h3 class="pt-8">Build</h3>
                 @if ($application->build_pack !== 'dockercompose')
-                    <div class="w-96">
+                    <div class="max-w-96">
                         <x-forms.checkbox
                             helper="Use a build server to build your application. You can configure your build server in the Server settings. This is experimental. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
                             instantSave id="application.settings.is_build_server_enabled"
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index 4375d6cfb..29ff99e71 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -1,23 +1,24 @@
 <nav wire:poll.5000ms="check_status">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" />
     <div class="navbar-main">
-        <a href="{{ route('project.application.configuration', $parameters) }}">
-            Configuration
-        </a>
-        <a href="{{ route('project.application.deployment.index', $parameters) }}">
-            <button>Deployments</button>
-        </a>
-        <a href="{{ route('project.application.logs', $parameters) }}">
-            <button>Logs</button>
-        </a>
-        @if (!$application->destination->server->isSwarm())
-            <a href="{{ route('project.application.command', $parameters) }}">
-                <button>Command</button>
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a href="{{ route('project.application.configuration', $parameters) }}">
+                Configuration
             </a>
-        @endif
-        <x-applications.links :application="$application" />
-        <div class="flex-1"></div>
-        <div class="flex items-center gap-2">
+            <a href="{{ route('project.application.deployment.index', $parameters) }}">
+                <button>Deployments</button>
+            </a>
+            <a href="{{ route('project.application.logs', $parameters) }}">
+                <button>Logs</button>
+            </a>
+            @if (!$application->destination->server->isSwarm())
+                <a href="{{ route('project.application.command', $parameters) }}">
+                    <button>Command</button>
+                </a>
+            @endif
+            <x-applications.links :application="$application" />
+        </nav>
+        <div class="flex items-center gap-2 order-first sm:order-last">
             @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
                 <div>Please load a Compose file.</div>
             @else
@@ -100,6 +101,7 @@
                 </div>
             @endif
         </div>
+
     </div>
     @script
         <script>
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 2829d4a8d..9b94c11ce 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -7,67 +7,70 @@
         </x-slot:content>
     </x-slide-over>
     <div class="navbar-main">
-        <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
-            href="{{ route('project.database.configuration', $parameters) }}">
-            <button>Configuration</button>
-        </a>
-        <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
-            href="{{ route('project.database.command', $parameters) }}">
-            <button>Execute Command</button>
-        </a>
-        <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
-            href="{{ route('project.database.logs', $parameters) }}">
-            <button>Logs</button>
-        </a>
-        @if (
-            $database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
-                $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' : '' }}"
-                href="{{ route('project.database.backup.index', $parameters) }}">
-                <button>Backups</button>
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.database.configuration', $parameters) }}">
+                <button>Configuration</button>
             </a>
-        @endif
-        <div class="flex-1"></div>
-        @if (!str($database->status)->startsWith('exited'))
-            <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
-                <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"
+            <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.database.command', $parameters) }}">
+                <button>Execute Command</button>
+            </a>
+            <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.database.logs', $parameters) }}">
+                <button>Logs</button>
+            </a>
+            @if (
+                $database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
+                    $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' : '' }}"
+                    href="{{ route('project.database.backup.index', $parameters) }}">
+                    <button>Backups</button>
+                </a>
+            @endif
+        </nav>
+        <div class="flex items-center gap-2 order-first sm:order-last">
+            @if (!str($database->status)->startsWith('exited'))
+                <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
+                    <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>
+                    This database will be stopped. <br>Please think again.
+                </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>
-                This database will be stopped. <br>Please think again.
-            </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
-        @script
-            <script>
-                $wire.$on('startEvent', () => {
-                    window.dispatchEvent(new CustomEvent('startdatabase'));
-                    $wire.$call('start');
-                });
-                $wire.$on('stopEvent', () => {
-                    $wire.$dispatch('info', 'Stopping database.');
-                    $wire.$call('stop');
-                });
-            </script>
-        @endscript
+                    Start
+                </button>
+            @endif
+            @script
+                <script>
+                    $wire.$on('startEvent', () => {
+                        window.dispatchEvent(new CustomEvent('startdatabase'));
+                        $wire.$call('start');
+                    });
+                    $wire.$on('stopEvent', () => {
+                        $wire.$dispatch('info', 'Stopping database.');
+                        $wire.$call('stop');
+                    });
+                </script>
+            @endscript
+        </div>
     </div>
 </nav>
diff --git a/resources/views/livewire/project/service/navbar.blade.php b/resources/views/livewire/project/service/navbar.blade.php
index 817efd2d7..1821396fd 100644
--- a/resources/views/livewire/project/service/navbar.blade.php
+++ b/resources/views/livewire/project/service/navbar.blade.php
@@ -9,13 +9,14 @@
     <h1>Configuration</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data>
-        <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
-            href="{{ route('project.service.configuration', $parameters) }}">
-            <button>Configuration</button>
-        </a>
-        <x-services.links :service="$service" />
-        <div class="flex-1"></div>
-        <div class="flex gap-2">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.service.configuration', $parameters) }}">
+                <button>Configuration</button>
+            </a>
+            <x-services.links :service="$service" />
+        </nav>
+        <div class="flex gap-2 order-first sm:order-last">
             @if (str($service->status())->contains('running'))
                 <button @click="$wire.dispatch('restartEvent')" class="gap-2 button">
                     <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

From 61fdf4b6c7fc0553c61a9318511ce1454eb9aa3f Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 16:41:15 +0000
Subject: [PATCH 12/29] use muni-item-active for submenus for services and
 database

---
 .../project/database/configuration.blade.php  | 20 +++++++++----------
 .../livewire/project/service/index.blade.php  | 10 +++++-----
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/resources/views/livewire/project/database/configuration.blade.php b/resources/views/livewire/project/database/configuration.blade.php
index dd3e05349..c95fe9880 100644
--- a/resources/views/livewire/project/database/configuration.blade.php
+++ b/resources/views/livewire/project/database/configuration.blade.php
@@ -4,45 +4,45 @@
     <livewire:project.database.heading :database="$database" />
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
         <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
-            <a :class="activeTab === 'general' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general';
                 window.location.hash = 'general'"
                 href="#">General</a>
-            <a :class="activeTab === 'environment-variables' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'environment-variables' && 'menu-item-active'"
                 @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                 href="#">Environment
                 Variables</a>
-            <a :class="activeTab === 'servers' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'servers' && 'menu-item-active'"
                 @click.prevent="activeTab = 'servers';
                 window.location.hash = 'servers'"
                 href="#">Servers
             </a>
-            <a :class="activeTab === 'storages' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'storages' && 'menu-item-active'"
                 @click.prevent="activeTab = 'storages';
                 window.location.hash = 'storages'"
                 href="#">Storages
             </a>
-            <a :class="activeTab === 'import' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'import' && 'menu-item-active'"
                 @click.prevent="activeTab = 'import';
             window.location.hash = 'import'" href="#">Import
                 Backup
             </a>
-            <a :class="activeTab === 'webhooks' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'webhooks' && 'menu-item-active'"
                 @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
             </a>
-            <a :class="activeTab === 'resource-limits' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'resource-limits' && 'menu-item-active'"
                 @click.prevent="activeTab = 'resource-limits';
                 window.location.hash = 'resource-limits'"
                 href="#">Resource Limits
             </a>
-            <a :class="activeTab === 'resource-operations' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'resource-operations' && 'menu-item-active'"
                 @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
                 href="#">Resource Operations
             </a>
-            <a :class="activeTab === 'tags' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'tags' && 'menu-item-active'"
                 @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
             </a>
-            <a :class="activeTab === 'danger' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'danger' && 'menu-item-active'"
                 @click.prevent="activeTab = 'danger';
                 window.location.hash = 'danger'"
                 href="#">Danger Zone
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
index 098a751bb..43a6225ba 100644
--- a/resources/views/livewire/project/service/index.blade.php
+++ b/resources/views/livewire/project/service/index.blade.php
@@ -2,25 +2,25 @@
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
     <div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
         <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
-            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
+            <a class="{{ request()->routeIs('project.service.configuration') ? 'menu-item-active' : '' }}"
                 href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
                 <button><- Back</button>
             </a>
-            <a :class="activeTab === 'general' && 'dark:text-white'"
+            <a :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'; if(window.location.search) window.location.search = ''"
                 href="#">General</a>
-            <a :class="activeTab === 'storages' && 'dark:text-white'"
+            <a :class="activeTab === 'storages' && 'menu-item-active'"
                 @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'; if(window.location.search) window.location.search = ''"
                 href="#">Storages
             </a>
-            <a :class="activeTab === 'scheduled-tasks' && 'dark:text-white'"
+            <a :class="activeTab === 'scheduled-tasks' && 'menu-item-active'"
                 @click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
                 href="#">Scheduled Tasks
             </a>
             @if (str($serviceDatabase?->databaseType())->contains('mysql') ||
                     str($serviceDatabase?->databaseType())->contains('postgres') ||
                     str($serviceDatabase?->databaseType())->contains('mariadb'))
-                <a :class="activeTab === 'backups' && 'dark:text-white'"
+                <a :class="activeTab === 'backups' && 'menu-item-active'"
                     @click.prevent="activeTab = 'backups'; window.location.hash = 'backups'" href="#">Backups</a>
             @endif
         </div>

From 0e217f48bed68e8e2fe936304941ca7873fbf10d Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 16:58:12 +0000
Subject: [PATCH 13/29] Improved input text spacing with small screens

---
 resources/views/auth/register.blade.php             | 3 +--
 resources/views/livewire/server/form.blade.php      | 2 +-
 resources/views/livewire/server/new/by-ip.blade.php | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index f57d8c6fc..e04d3633d 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -4,8 +4,7 @@
             <a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
                 Coolify
             </a>
-            <div
-                class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base">
+            <div class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base">
                 <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                     <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                         Create an account
diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index 48c00d6f9..5f2975286 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -132,7 +132,7 @@
 
         @if ($server->isFunctional())
             <h3 class="py-4">Settings</h3>
-            <div class="flex gap-2">
+            <div class="flex gap-2 flex-wrap sm:flex-nowrap">
                 <x-forms.input id="cleanup_after_percentage" label="Disk cleanup threshold (%)" required
                     helper="The disk cleanup task will run when the disk usage exceeds this threshold." />
                 <x-forms.input id="server.settings.concurrent_builds" label="Number of concurrent builds" required
diff --git a/resources/views/livewire/server/new/by-ip.blade.php b/resources/views/livewire/server/new/by-ip.blade.php
index e6347e236..8bb7bf7c8 100644
--- a/resources/views/livewire/server/new/by-ip.blade.php
+++ b/resources/views/livewire/server/new/by-ip.blade.php
@@ -3,11 +3,11 @@
         <x-limit-reached name="servers" />
     @else
         <form class="flex flex-col w-full gap-2" wire:submit='submit'>
-            <div class="flex w-full gap-2">
+            <div class="flex w-full gap-2 flex-wrap sm:flex-nowrap">
                 <x-forms.input autofocus id="name" label="Name" required />
                 <x-forms.input id="description" label="Description" />
             </div>
-            <div class="flex gap-2">
+            <div class="flex gap-2 flex-wrap sm:flex-nowrap">
                 <x-forms.input id="ip" label="IP Address/Domain" required
                     helper="An IP Address (127.0.0.1) or domain (example.com)." />
                 <x-forms.input type="number" id="port" label="Port" required />

From 7cd02b4916fd2108096357f1024c6340db2295c9 Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 16:58:55 +0000
Subject: [PATCH 14/29] moved width class on parent

---
 .../project/application/advanced.blade.php    | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/resources/views/livewire/project/application/advanced.blade.php b/resources/views/livewire/project/application/advanced.blade.php
index 5d2922a7e..dac9466f5 100644
--- a/resources/views/livewire/project/application/advanced.blade.php
+++ b/resources/views/livewire/project/application/advanced.blade.php
@@ -1,10 +1,10 @@
 <div>
-    <div class="flex flex-col">
+    <div class="flex flex-col md:w-96">
         <div class="flex items-center gap-2">
             <h2>Advanced</h2>
         </div>
         <div>Advanced configuration for your application.</div>
-        <div class="flex flex-col gap-1 pt-4 md:w-96">
+        <div class="flex flex-col gap-1 pt-4">
             <h3>General</h3>
             @if ($application->git_based())
                 <x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave
@@ -32,11 +32,9 @@
             @endif
             @if ($application->build_pack === 'dockercompose')
                 <h3>Network</h3>
-                <div class="w-96">
-                    <x-forms.checkbox instantSave id="application.settings.connect_to_docker_network"
-                        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>." />
-                </div>
+                <x-forms.checkbox instantSave id="application.settings.connect_to_docker_network"
+                    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>." />
             @endif
             @if (!$application->settings->is_raw_compose_deployment_enabled)
                 <h3>Logs</h3>
@@ -60,16 +58,14 @@
         @endif
         <form wire:submit="submit">
             @if ($application->build_pack !== 'dockercompose')
-                <div class="w-96">
-                    <x-forms.checkbox
-                        helper="Enable GPU usage for this application. More info <a href='https://docs.docker.com/compose/gpu-support/' class='underline dark:text-white' target='_blank'>here</a>."
-                        instantSave id="application.settings.is_gpu_enabled" label="Attach GPU" />
-                    @if ($application->settings->is_gpu_enabled)
-                        <h5>GPU Settings</h5>
+                <x-forms.checkbox
+                    helper="Enable GPU usage for this application. More info <a href='https://docs.docker.com/compose/gpu-support/' class='underline dark:text-white' target='_blank'>here</a>."
+                    instantSave id="application.settings.is_gpu_enabled" label="Attach GPU" />
+                @if ($application->settings->is_gpu_enabled)
+                    <h5>GPU Settings</h5>
 
-                        <x-forms.button type="submit">Save</x-forms.button>
-                    @endif
-                </div>
+                    <x-forms.button type="submit">Save</x-forms.button>
+                @endif
             @endif
             @if ($application->settings->is_gpu_enabled)
                 <div class="flex flex-col w-full gap-2 p-2 xl:flex-row">

From 296872d2e4c79dc67e5012262a24b519bea46978 Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 17:04:59 +0000
Subject: [PATCH 15/29] database configuration input boxes use wrap in small
 screens

---
 .../livewire/project/database/postgresql/general.blade.php    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/livewire/project/database/postgresql/general.blade.php b/resources/views/livewire/project/database/postgresql/general.blade.php
index 1a9651155..a5f59d6d0 100644
--- a/resources/views/livewire/project/database/postgresql/general.blade.php
+++ b/resources/views/livewire/project/database/postgresql/general.blade.php
@@ -20,7 +20,7 @@
                 Save
             </x-forms.button>
         </div>
-        <div class="flex gap-2">
+        <div class="flex gap-2 flex-wrap sm:flex-nowrap">
             <x-forms.input label="Name" id="database.name" />
             <x-forms.input label="Description" id="database.description" />
             <x-forms.input label="Image" id="database.image" required
@@ -28,7 +28,7 @@
         </div>
 
         @if ($database->started_at)
-            <div class="flex gap-2">
+            <div class="flex gap-2 flex-wrap sm:flex-nowrap">
                 <x-forms.input label="Initial Username" id="database.postgres_user" placeholder="If empty: postgres"
                     readonly helper="You can only change this in the database." />
                 <x-forms.input label="Initial Password" id="database.postgres_password" type="password" required

From d81906d348e327a74b5962e69afe0356d5c2fa96 Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 17:09:22 +0000
Subject: [PATCH 16/29] assing a min height to navbar list

---
 resources/views/components/notification/navbar.blade.php       | 2 +-
 resources/views/components/security/navbar.blade.php           | 2 +-
 resources/views/components/server/navbar.blade.php             | 2 +-
 resources/views/components/settings/navbar.blade.php           | 2 +-
 resources/views/components/team/navbar.blade.php               | 2 +-
 resources/views/livewire/project/application/heading.blade.php | 2 +-
 resources/views/livewire/project/database/heading.blade.php    | 2 +-
 resources/views/livewire/project/service/navbar.blade.php      | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/views/components/notification/navbar.blade.php b/resources/views/components/notification/navbar.blade.php
index 50e8ae89d..ab04d5e19 100644
--- a/resources/views/components/notification/navbar.blade.php
+++ b/resources/views/components/notification/navbar.blade.php
@@ -2,7 +2,7 @@
     <h1>Notifications</h1>
     <div class="subtitle">Get notified about your infrastructure.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
             <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
                 href="{{ route('notifications.email') }}">
                 <button>Email</button>
diff --git a/resources/views/components/security/navbar.blade.php b/resources/views/components/security/navbar.blade.php
index e3add9776..bee38855d 100644
--- a/resources/views/components/security/navbar.blade.php
+++ b/resources/views/components/security/navbar.blade.php
@@ -2,7 +2,7 @@
     <h1>Security</h1>
     <div class="subtitle">Security related settings.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
             <a href="{{ route('security.private-key.index') }}">
                 <button>Private Keys</button>
             </a>
diff --git a/resources/views/components/server/navbar.blade.php b/resources/views/components/server/navbar.blade.php
index 6d23af891..9cae35eba 100644
--- a/resources/views/components/server/navbar.blade.php
+++ b/resources/views/components/server/navbar.blade.php
@@ -6,7 +6,7 @@
     </div>
     <div class="subtitle">{{ data_get($server, 'name') }}.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
             <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.show', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
diff --git a/resources/views/components/settings/navbar.blade.php b/resources/views/components/settings/navbar.blade.php
index fff8cc4b8..1caf858d1 100644
--- a/resources/views/components/settings/navbar.blade.php
+++ b/resources/views/components/settings/navbar.blade.php
@@ -2,7 +2,7 @@
     <h1>Settings</h1>
     <div class="subtitle">Instance wide settings for Coolify.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
             <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
                 href="{{ route('settings.index') }}">
                 <button>Configuration</button>
diff --git a/resources/views/components/team/navbar.blade.php b/resources/views/components/team/navbar.blade.php
index d5fe82f95..a3d677b7d 100644
--- a/resources/views/components/team/navbar.blade.php
+++ b/resources/views/components/team/navbar.blade.php
@@ -7,7 +7,7 @@
     </div>
     <div class="subtitle">Team wide configurations.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
             <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
                 <button>General</button>
             </a>
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index 29ff99e71..fe252e43c 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -1,7 +1,7 @@
 <nav wire:poll.5000ms="check_status">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" />
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
             <a href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 9b94c11ce..948528127 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -7,7 +7,7 @@
         </x-slot:content>
     </x-slide-over>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
             <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.configuration', $parameters) }}">
                 <button>Configuration</button>
diff --git a/resources/views/livewire/project/service/navbar.blade.php b/resources/views/livewire/project/service/navbar.blade.php
index 1821396fd..bf810df2d 100644
--- a/resources/views/livewire/project/service/navbar.blade.php
+++ b/resources/views/livewire/project/service/navbar.blade.php
@@ -9,7 +9,7 @@
     <h1>Configuration</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data>
-        <nav class="flex gap-4 overflow-x-scroll items-center">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
             <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.configuration', $parameters) }}">
                 <button>Configuration</button>

From 99c7e417d65f694d9dd8ec7baddb85bdd390c8a0 Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 17:17:54 +0000
Subject: [PATCH 17/29] Global setting's input text uses flex wrap for better
 spacing on small screens

---
 .../views/livewire/settings/configuration.blade.php    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/views/livewire/settings/configuration.blade.php b/resources/views/livewire/settings/configuration.blade.php
index a7292f624..cbd3ca6be 100644
--- a/resources/views/livewire/settings/configuration.blade.php
+++ b/resources/views/livewire/settings/configuration.blade.php
@@ -9,12 +9,14 @@
         <div>General configuration for your Coolify instance.</div>
 
         <div class="flex flex-col gap-2 pt-4">
-            <div class="flex items-end gap-2">
+            <div class="flex items-end gap-2 flex-wrap">
                 <x-forms.input id="settings.fqdn" label="Instance's Domain" placeholder="https://coolify.io" />
                 <x-forms.input id="settings.custom_dns_servers" label="DNS Servers"
                     helper="DNS servers for validation FQDNS againts. A comma separated list of DNS servers."
                     placeholder="1.1.1.1,8.8.8.8" />
-                <x-forms.checkbox instantSave id="is_dns_validation_enabled" label="Validate DNS settings?" />
+                <div class="md:w-96">
+                    <x-forms.checkbox instantSave id="is_dns_validation_enabled" label="Validate DNS settings?" />
+                </div>
             </div>
 
             {{-- <div class="flex gap-2 ">
@@ -24,12 +26,12 @@
         </div>
     </form>
     <h2 class="pt-6">Advanced</h2>
-    <div class="text-right w-80">
+    <div class="text-right md:w-96">
         @if (!is_null(env('AUTOUPDATE', null)))
             <x-forms.checkbox instantSave helper="AUTOUPDATE is set in .env file, you need to modify it there." disabled
                 id="is_auto_update_enabled" label="Auto Update Coolify" />
         @else
-            <x-forms.checkbox  instantSave id="is_auto_update_enabled" label="Auto Update Coolify" />
+            <x-forms.checkbox instantSave id="is_auto_update_enabled" label="Auto Update Coolify" />
         @endif
         <x-forms.checkbox instantSave id="is_registration_enabled" label="Registration Allowed" />
         <x-forms.checkbox instantSave id="do_not_track" label="Do Not Track" />

From 323590726636b13a17c782a71499d12d2abffc2d Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 17:18:48 +0000
Subject: [PATCH 18/29] Refactor settings page layout for better responsiveness

---
 .../views/livewire/settings/index.blade.php     | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/resources/views/livewire/settings/index.blade.php b/resources/views/livewire/settings/index.blade.php
index 5ab89413d..1e8c23814 100644
--- a/resources/views/livewire/settings/index.blade.php
+++ b/resources/views/livewire/settings/index.blade.php
@@ -1,18 +1,19 @@
 <div>
     <x-settings.navbar />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1">
-        <div class="flex flex-col gap-4 min-w-fit">
-            <a :class="activeTab === 'general' && 'dark:text-white'"
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1 gap-8 sm:flex-row flex-col">
+        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
+            <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
-            <a :class="activeTab === 'backup' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'backup' && 'menu-item-active'"
                 @click.prevent="activeTab = 'backup'; window.location.hash = 'backup'" href="#">Instance Backup</a>
-            <a :class="activeTab === 'smtp' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'smtp' && 'menu-item-active'"
                 @click.prevent="activeTab = 'smtp'; window.location.hash = 'smtp'" href="#">Transactional
                 Email</a>
-            <a :class="activeTab === 'auth' && 'dark:text-white'"
-                @click.prevent="activeTab = 'auth'; window.location.hash = 'auth'" href="#">Authentication (OAuth)</a>
+            <a class="menu-item" :class="activeTab === 'auth' && 'menu-item-active'"
+                @click.prevent="activeTab = 'auth'; window.location.hash = 'auth'" href="#">Authentication
+                (OAuth)</a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'general'" class="h-full">
                 <livewire:settings.configuration :settings="$settings" />
             </div>

From 1b30ee606f3ceaa58b7062c5cc1860660c55eb5e Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 18:14:14 +0000
Subject: [PATCH 19/29] improved responsivness in case the service/app/database
 is deployed

---
 resources/css/app.css                                     | 2 +-
 .../views/livewire/project/application/heading.blade.php  | 8 +++++---
 .../views/livewire/project/database/heading.blade.php     | 4 ++--
 resources/views/livewire/project/service/navbar.blade.php | 4 ++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index fd3e1d174..c2a0ac73b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -185,7 +185,7 @@ tr td:first-child {
 }
 
 .navbar-main {
-    @apply flex h-fit flex-col sm:flex-row justify-items-start sm:justify-between gap-4 pb-2 border-b-2 border-solid dark:border-coolgray-200 sm:items-center;
+    @apply flex h-fit flex-col md:flex-row justify-items-start sm:justify-between gap-4 pb-2 border-b-2 border-solid dark:border-coolgray-200 md:items-center;
 }
 
 .loading {
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index fe252e43c..898890884 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -1,7 +1,7 @@
 <nav wire:poll.5000ms="check_status">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" />
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0">
             <a href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
@@ -18,14 +18,16 @@
             @endif
             <x-applications.links :application="$application" />
         </nav>
-        <div class="flex items-center gap-2 order-first sm:order-last">
+        <div class="flex items-center gap-2 order-first md:order-last flex-wrap md:flex-nowrap">
             @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 class="md:order-first order-last">
                     <x-applications.advanced :application="$application" />
+                </div>
                 @endif
-                <div class="flex gap-2">
+                <div class="flex gap-2 flex-wrap">
                     @if (!str($application->status)->startsWith('exited'))
                         @if (!$application->destination->server->isSwarm())
                             <x-forms.button title="With rolling update if possible" wire:click='deploy'>
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 948528127..2b79bd35a 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -7,7 +7,7 @@
         </x-slot:content>
     </x-slide-over>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0">
             <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.configuration', $parameters) }}">
                 <button>Configuration</button>
@@ -31,7 +31,7 @@
                 </a>
             @endif
         </nav>
-        <div class="flex items-center gap-2 order-first sm:order-last">
+        <div class="flex items-center gap-2 order-first sm:order-last flex-wrap">
             @if (!str($database->status)->startsWith('exited'))
                 <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
                     <x-slot:button-title>
diff --git a/resources/views/livewire/project/service/navbar.blade.php b/resources/views/livewire/project/service/navbar.blade.php
index bf810df2d..b72be5cd8 100644
--- a/resources/views/livewire/project/service/navbar.blade.php
+++ b/resources/views/livewire/project/service/navbar.blade.php
@@ -9,14 +9,14 @@
     <h1>Configuration</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data>
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
+        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0">
             <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.configuration', $parameters) }}">
                 <button>Configuration</button>
             </a>
             <x-services.links :service="$service" />
         </nav>
-        <div class="flex gap-2 order-first sm:order-last">
+        <div class="flex items-center gap-2 order-first sm:order-last flex-wrap">
             @if (str($service->status())->contains('running'))
                 <button @click="$wire.dispatch('restartEvent')" class="gap-2 button">
                     <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

From bf2e7ff130e7581d430284e7d0c23b3314dd2d14 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 11:44:27 +0200
Subject: [PATCH 20/29] chore: update version to 4.0.0-beta.275

---
 config/sentry.php  | 2 +-
 config/version.php | 2 +-
 versions.json      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/config/sentry.php b/config/sentry.php
index 633e5bcd6..7aa3e5aab 100644
--- a/config/sentry.php
+++ b/config/sentry.php
@@ -7,7 +7,7 @@ return [
 
     // The release version of your application
     // Example with dynamic git hash: trim(exec('git --git-dir ' . base_path('.git') . ' log --pretty="%h" -n1 HEAD'))
-    'release' => '4.0.0-beta.274',
+    'release' => '4.0.0-beta.275',
     // When left empty or `null` the Laravel environment will be used
     'environment' => config('app.env'),
 
diff --git a/config/version.php b/config/version.php
index 3cb55c8fd..fc9a2d839 100644
--- a/config/version.php
+++ b/config/version.php
@@ -1,3 +1,3 @@
 <?php
 
-return '4.0.0-beta.274';
+return '4.0.0-beta.275';
diff --git a/versions.json b/versions.json
index 2225d2fbc..dda23fa0f 100644
--- a/versions.json
+++ b/versions.json
@@ -1,7 +1,7 @@
 {
     "coolify": {
         "v4": {
-            "version": "4.0.0-beta.274"
+            "version": "4.0.0-beta.275"
         }
     }
 }

From 05c937743c5a5a75074f3a03ffc6a5c01e700474 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 11:45:22 +0200
Subject: [PATCH 21/29] feat: custom internal container names fix: add warning
 if hc fails with dockerfile/dockerimage based deployments

---
 app/Jobs/ApplicationDeploymentJob.php         | 110 +++---------------
 app/Livewire/Project/Application/Advanced.php |  17 ++-
 bootstrap/helpers/shared.php                  |   1 -
 ...dd_custom_name_to_application_settings.php |  28 +++++
 .../views/components/popup-small.blade.php    |   2 +-
 .../project/application/advanced.blade.php    |  15 ++-
 6 files changed, 73 insertions(+), 100 deletions(-)
 create mode 100644 database/migrations/2024_05_06_093236_add_custom_name_to_application_settings.php

diff --git a/app/Jobs/ApplicationDeploymentJob.php b/app/Jobs/ApplicationDeploymentJob.php
index efa906388..da66671f3 100644
--- a/app/Jobs/ApplicationDeploymentJob.php
+++ b/app/Jobs/ApplicationDeploymentJob.php
@@ -869,7 +869,7 @@ class ApplicationDeploymentJob implements ShouldQueue, ShouldBeEncrypted
                 $this->write_deployment_configurations();
                 $this->server = $this->original_server;
             }
-            if (count($this->application->ports_mappings_array) > 0 || (bool) $this->application->settings->is_consistent_container_name_enabled || $this->pull_request_id !== 0 || str($this->application->custom_docker_run_options)->contains('--ip') || str($this->application->custom_docker_run_options)->contains('--ip6')) {
+            if (count($this->application->ports_mappings_array) > 0 || (bool) $this->application->settings->is_consistent_container_name_enabled || isset($this->application->settings->custom_internal_name) || $this->pull_request_id !== 0 || str($this->application->custom_docker_run_options)->contains('--ip') || str($this->application->custom_docker_run_options)->contains('--ip6')) {
                 $this->application_deployment_queue->addLogEntry("----------------------------------------");
                 if (count($this->application->ports_mappings_array) > 0) {
                     $this->application_deployment_queue->addLogEntry("Application has ports mapped to the host system, rolling update is not supported.");
@@ -877,6 +877,9 @@ class ApplicationDeploymentJob implements ShouldQueue, ShouldBeEncrypted
                 if ((bool) $this->application->settings->is_consistent_container_name_enabled) {
                     $this->application_deployment_queue->addLogEntry("Consistent container name feature enabled, rolling update is not supported.");
                 }
+                if (isset($this->application->settings->custom_internal_name)) {
+                    $this->application_deployment_queue->addLogEntry("Custom internal name is set, rolling update is not supported.");
+                }
                 if ($this->pull_request_id !== 0) {
                     $this->application->settings->is_consistent_container_name_enabled = true;
                     $this->application_deployment_queue->addLogEntry("Pull request deployment, rolling update is not supported.");
@@ -1292,7 +1295,9 @@ class ApplicationDeploymentJob implements ShouldQueue, ShouldBeEncrypted
                     'restart' => RESTART_MODE,
                     'expose' => $ports,
                     'networks' => [
-                        $this->destination->network,
+                        $this->destination->network => [
+                            'aliases' => []
+                        ]
                     ],
                     'mem_limit' => $this->application->limits_memory,
                     'memswap_limit' => $this->application->limits_memory_swap,
@@ -1310,6 +1315,9 @@ class ApplicationDeploymentJob implements ShouldQueue, ShouldBeEncrypted
                 ]
             ]
         ];
+        if (isset($this->application->settings->custom_internal_name)) {
+            $docker_compose['services'][$this->container_name]['networks'][$this->destination->network]['aliases'][] = $this->application->settings->custom_internal_name;
+        }
         // if (str($this->saved_outputs->get('dotenv'))->isNotEmpty()) {
         //     if (data_get($docker_compose, "services.{$this->container_name}.env_file")) {
         //         $docker_compose['services'][$this->container_name]['env_file'][] = '.env';
@@ -1519,95 +1527,8 @@ class ApplicationDeploymentJob implements ShouldQueue, ShouldBeEncrypted
         return $local_persistent_volumes_names;
     }
 
-    /*private function generate_environment_variables($ports)
-    {
-        $environment_variables = collect();
-        if ($this->pull_request_id === 0) {
-            foreach ($this->application->runtime_environment_variables as $env) {
-                // This is necessary because we have to escape the value of the environment variable
-                // but only if the environment variable is created after 4.0.0-beta.240
-                // when I implemented the escaping feature.
-
-                // Old environment variables are not escaped, because it could break the application
-                // as the application could expect the unescaped value.
-                if ($env->version === '4.0.0-beta.239') {
-                    $real_value = $env->real_value;
-                } else {
-                    $real_value = escapeEnvVariables($env->real_value);
-                }
-                if ($env->is_literal) {
-                    $real_value = escapeDollarSign($real_value);
-                    $environment_variables->push("$env->key='$real_value'");
-                } else {
-                    $environment_variables->push("$env->key=$real_value");
-                }
-            }
-            foreach ($this->application->nixpacks_environment_variables as $env) {
-                if ($env->version === '4.0.0-beta.239') {
-                    $real_value = $env->real_value;
-                } else {
-                    $real_value = escapeEnvVariables($env->real_value);
-                }
-                if ($env->is_literal) {
-                    $real_value = escapeDollarSign($real_value);
-                    $environment_variables->push("$env->key='$real_value'");
-                } else {
-                    $environment_variables->push("$env->key=$real_value");
-                }
-            }
-        } else {
-            foreach ($this->application->runtime_environment_variables_preview as $env) {
-                if ($env->version === '4.0.0-beta.239') {
-                    $real_value = $env->real_value;
-                } else {
-                    $real_value = escapeEnvVariables($env->real_value);
-                }
-                if ($env->is_literal) {
-                    $real_value = escapeDollarSign($real_value);
-                    $environment_variables->push("$env->key='$real_value'");
-                } else {
-                    $environment_variables->push("$env->key=$real_value");
-                }
-            }
-            foreach ($this->application->nixpacks_environment_variables_preview as $env) {
-                if ($env->version === '4.0.0-beta.239') {
-                    $real_value = $env->real_value;
-                } else {
-                    $real_value = escapeEnvVariables($env->real_value);
-                }
-                if ($env->is_literal) {
-                    $real_value = escapeDollarSign($real_value);
-                    $environment_variables->push("$env->key='$real_value'");
-                } else {
-                    $environment_variables->push("$env->key=$real_value");
-                }
-            }
-        }
-        // Add PORT if not exists, use the first port as default
-        if ($environment_variables->filter(fn ($env) => Str::of($env)->startsWith('PORT'))->isEmpty()) {
-            $environment_variables->push("PORT={$ports[0]}");
-        }
-        // Add HOST if not exists
-        if ($environment_variables->filter(fn ($env) => Str::of($env)->startsWith('HOST'))->isEmpty()) {
-            $environment_variables->push("HOST=0.0.0.0");
-        }
-        if ($environment_variables->filter(fn ($env) => Str::of($env)->startsWith('SOURCE_COMMIT'))->isEmpty()) {
-            if (!is_null($this->commit)) {
-                $environment_variables->push("SOURCE_COMMIT={$this->commit}");
-            } else {
-                $environment_variables->push("SOURCE_COMMIT=unknown");
-            }
-        }
-        ray($environment_variables->all());
-        return $environment_variables->all();
-    }*/
-
     private function generate_healthcheck_commands()
     {
-        // if ($this->application->dockerfile || $this->application->build_pack === 'dockerfile' || $this->application->build_pack === 'dockerimage') {
-        //     // TODO: disabled HC because there are several ways to hc a simple docker image, hard to figure out a good way. Like some docker images (pocketbase) does not have curl.
-        //     return 'exit 0';
-        // }
         if (!$this->application->health_check_port) {
             $health_check_port = $this->application->ports_exposes_array[0];
         } else {
@@ -1619,12 +1540,12 @@ class ApplicationDeploymentJob implements ShouldQueue, ShouldBeEncrypted
         if ($this->application->health_check_path) {
             $this->full_healthcheck_url = "{$this->application->health_check_method}: {$this->application->health_check_scheme}://{$this->application->health_check_host}:{$health_check_port}{$this->application->health_check_path}";
             $generated_healthchecks_commands = [
-                "curl -s -X {$this->application->health_check_method} -f {$this->application->health_check_scheme}://{$this->application->health_check_host}:{$health_check_port}{$this->application->health_check_path} > /dev/null"
+                "curl -s -X {$this->application->health_check_method} -f {$this->application->health_check_scheme}://{$this->application->health_check_host}:{$health_check_port}{$this->application->health_check_path} > /dev/null || wget -q -O- {$this->application->health_check_scheme}://{$this->application->health_check_host}:{$health_check_port}{$this->application->health_check_path} > /dev/null || exit 1"
             ];
         } else {
             $this->full_healthcheck_url = "{$this->application->health_check_method}: {$this->application->health_check_scheme}://{$this->application->health_check_host}:{$health_check_port}/";
             $generated_healthchecks_commands = [
-                "curl -s -X {$this->application->health_check_method} -f {$this->application->health_check_scheme}://{$this->application->health_check_host}:{$health_check_port}/"
+                "curl -s -X {$this->application->health_check_method} -f {$this->application->health_check_scheme}://{$this->application->health_check_host}:{$health_check_port}/ > /dev/null || wget -q -O- {$this->application->health_check_scheme}://{$this->application->health_check_host}:{$health_check_port}/ > /dev/null || exit 1"
             ];
         }
         return implode(' ', $generated_healthchecks_commands);
@@ -1813,12 +1734,17 @@ COPY ./nginx.conf /etc/nginx/conf.d/default.conf");
                     ["docker rm -f $containerName >/dev/null 2>&1", "hidden" => true, "ignore_errors" => true],
                 );
             });
-            if ($this->application->settings->is_consistent_container_name_enabled) {
+            if ($this->application->settings->is_consistent_container_name_enabled || isset($this->application->settings->custom_internal_name)) {
                 $this->execute_remote_command(
                     ["docker rm -f $this->container_name >/dev/null 2>&1", "hidden" => true, "ignore_errors" => true],
                 );
             }
         } else {
+            if ($this->application->dockerfile || $this->application->build_pack === 'dockerfile' || $this->application->build_pack === 'dockerimage') {
+                $this->application_deployment_queue->addLogEntry("----------------------------------------");
+                $this->application_deployment_queue->addLogEntry("WARNING: Dockerfile or Docker Image based deployment detected. The healthcheck needs a curl or wget command to check the health of the application. Please make sure that it is available in the image or turn off healthcheck on Coolify's UI.");
+                $this->application_deployment_queue->addLogEntry("----------------------------------------");
+            }
             $this->application_deployment_queue->addLogEntry("New container is not healthy, rolling back to the old container.");
             $this->application_deployment_queue->update([
                 'status' => ApplicationDeploymentStatus::FAILED->value,
diff --git a/app/Livewire/Project/Application/Advanced.php b/app/Livewire/Project/Application/Advanced.php
index d35867e8f..45cb57ee3 100644
--- a/app/Livewire/Project/Application/Advanced.php
+++ b/app/Livewire/Project/Application/Advanced.php
@@ -21,6 +21,7 @@ class Advanced extends Component
         'application.settings.is_gpu_enabled' => 'boolean|required',
         'application.settings.is_build_server_enabled' => 'boolean|required',
         'application.settings.is_consistent_container_name_enabled' => 'boolean|required',
+        'application.settings.custom_internal_name' => 'string|nullable',
         'application.settings.is_gzip_enabled' => 'boolean|required',
         'application.settings.is_stripprefix_enabled' => 'boolean|required',
         'application.settings.gpu_driver' => 'string|required',
@@ -30,7 +31,8 @@ class Advanced extends Component
         'application.settings.is_raw_compose_deployment_enabled' => 'boolean|required',
         'application.settings.connect_to_docker_network' => 'boolean|required',
     ];
-    public function mount() {
+    public function mount()
+    {
         $this->is_force_https_enabled = $this->application->isForceHttpsEnabled();
         $this->is_gzip_enabled = $this->application->isGzipEnabled();
         $this->is_stripprefix_enabled = $this->application->isStripprefixEnabled();
@@ -65,7 +67,8 @@ class Advanced extends Component
         $this->dispatch('success', 'Settings saved.');
         $this->dispatch('configurationChanged');
     }
-    public function submit() {
+    public function submit()
+    {
         if ($this->application->settings->gpu_count && $this->application->settings->gpu_device_ids) {
             $this->dispatch('error', 'You cannot set both GPU count and GPU device IDs.');
             $this->application->settings->gpu_count = null;
@@ -76,6 +79,16 @@ class Advanced extends Component
         $this->application->settings->save();
         $this->dispatch('success', 'Settings saved.');
     }
+    public function saveCustomName()
+    {
+        if (isset($this->application->settings->custom_internal_name)) {
+            $this->application->settings->custom_internal_name = str($this->application->settings->custom_internal_name)->slug()->value();
+        } else {
+            $this->application->settings->custom_internal_name = null;
+        }
+        $this->application->settings->save();
+        $this->dispatch('success', 'Custom name saved.');
+    }
     public function render()
     {
         return view('livewire.project.application.advanced');
diff --git a/bootstrap/helpers/shared.php b/bootstrap/helpers/shared.php
index 6c5ec2319..f11a9e416 100644
--- a/bootstrap/helpers/shared.php
+++ b/bootstrap/helpers/shared.php
@@ -1920,7 +1920,6 @@ function check_domain_usage(ServiceApplication|Application|null $resource = null
             $naked_domain = str($domain)->value();
             if ($domains->contains($naked_domain)) {
                 if (data_get($resource, 'uuid')) {
-                    ray($resource->uuid, $app->uuid);
                     if ($resource->uuid !== $app->uuid) {
                         throw new \RuntimeException("Domain $naked_domain is already in use by another resource called: <br><br>{$app->name}.");
                     }
diff --git a/database/migrations/2024_05_06_093236_add_custom_name_to_application_settings.php b/database/migrations/2024_05_06_093236_add_custom_name_to_application_settings.php
new file mode 100644
index 000000000..e2d68d240
--- /dev/null
+++ b/database/migrations/2024_05_06_093236_add_custom_name_to_application_settings.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('application_settings', function (Blueprint $table) {
+            $table->string('custom_internal_name')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('application_settings', function (Blueprint $table) {
+            $table->dropColumn('custom_internal_name');
+        });
+    }
+};
diff --git a/resources/views/components/popup-small.blade.php b/resources/views/components/popup-small.blade.php
index 97ed025fe..ba6839bab 100644
--- a/resources/views/components/popup-small.blade.php
+++ b/resources/views/components/popup-small.blade.php
@@ -8,7 +8,7 @@
     x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
     class="fixed bottom-0 right-0  h-auto duration-300 ease-out px-5 pb-5 max-w-[46rem] z-[999]" x-cloak>
     <div
-        class="flex flex-col items-center justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100/40 hover:dark:bg-coolgray-100/100 lg:p-8 lg:flex-row sm:rounded">
+        class="flex flex-col items-center justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 hover:dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded">
         <div
             class="flex flex-col items-start h-full pb-0 text-xs lg:items-center lg:flex-row lg:pr-6 lg:space-x-5 dark:text-neutral-300 ">
             @if (isset($icon))
diff --git a/resources/views/livewire/project/application/advanced.blade.php b/resources/views/livewire/project/application/advanced.blade.php
index 5d2922a7e..a2aab3fbc 100644
--- a/resources/views/livewire/project/application/advanced.blade.php
+++ b/resources/views/livewire/project/application/advanced.blade.php
@@ -16,10 +16,6 @@
             <x-forms.checkbox
                 helper="Your application will be available only on https if your domain starts with https://..."
                 instantSave id="is_force_https_enabled" label="Force Https" />
-            <x-forms.checkbox
-                helper="The deployed container will have the same name ({{ $application->uuid }}). <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
-                instantSave id="application.settings.is_consistent_container_name_enabled"
-                label="Consistent Container Names" />
             <x-forms.checkbox label="Enable gzip compression"
                 helper="You can disable gzip compression if you want. Some services are compressing data by default. In this case, you do not need this."
                 instantSave id="is_gzip_enabled" />
@@ -30,6 +26,17 @@
                     label="Raw Compose Deployment"
                     helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/compose#raw-docker-compose-deployment'>documentation.</a>" />
             @endif
+            <h3>Container Names</h3>
+            <x-forms.checkbox
+                helper="The deployed container will have the same name ({{ $application->uuid }}). <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
+                instantSave id="application.settings.is_consistent_container_name_enabled"
+                label="Consistent Container Names" />
+            <form class="flex items-end gap-2 pl-2" wire:submit.prevent='saveCustomName'>
+                <x-forms.input
+                    helper="You can add a custom internal name for your container. This name will be used in the internal network. <br><br>The name will be converted to slug format when you save it.  <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
+                    instantSave id="application.settings.custom_internal_name" label="Add Custom Internal Name" />
+                <x-forms.button type="submit">Save</x-forms.button>
+            </form>
             @if ($application->build_pack === 'dockercompose')
                 <h3>Network</h3>
                 <div class="w-96">

From 6062a1f8c7a1535b7029f8adc62c26d6795109ea Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 12:33:22 +0200
Subject: [PATCH 22/29] chore: Update DNS server validation helper text

---
 bootstrap/helpers/shared.php                              | 2 +-
 resources/views/livewire/settings/configuration.blade.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/bootstrap/helpers/shared.php b/bootstrap/helpers/shared.php
index f11a9e416..d5cacb06c 100644
--- a/bootstrap/helpers/shared.php
+++ b/bootstrap/helpers/shared.php
@@ -1841,7 +1841,7 @@ function validate_dns_entry(string $fqdn, Server $server)
     $dns_servers = data_get($settings, 'custom_dns_servers');
     $dns_servers = str($dns_servers)->explode(',');
     if ($server->id === 0) {
-        $ip = data_get($settings, 'public_ipv4') || data_get($settings, 'public_ipv6') || $server->ip;
+        $ip = data_get($settings, 'public_ipv4', data_get($settings, 'public_ipv6', $server->ip));
     } else {
         $ip = $server->ip;
     }
diff --git a/resources/views/livewire/settings/configuration.blade.php b/resources/views/livewire/settings/configuration.blade.php
index a7292f624..d79121983 100644
--- a/resources/views/livewire/settings/configuration.blade.php
+++ b/resources/views/livewire/settings/configuration.blade.php
@@ -12,7 +12,7 @@
             <div class="flex items-end gap-2">
                 <x-forms.input id="settings.fqdn" label="Instance's Domain" placeholder="https://coolify.io" />
                 <x-forms.input id="settings.custom_dns_servers" label="DNS Servers"
-                    helper="DNS servers for validation FQDNS againts. A comma separated list of DNS servers."
+                    helper="DNS servers for validation FQDNs againts. A comma separated list of DNS servers."
                     placeholder="1.1.1.1,8.8.8.8" />
                 <x-forms.checkbox instantSave id="is_dns_validation_enabled" label="Validate DNS settings?" />
             </div>

From d53a9e672c33828845360208eaaf9de1a7bf1d6e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 12:39:47 +0200
Subject: [PATCH 23/29] fix: Comment out internal notification in email_verify
 method

---
 app/Http/Controllers/Controller.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Http/Controllers/Controller.php b/app/Http/Controllers/Controller.php
index 1241751f0..daba1cecb 100644
--- a/app/Http/Controllers/Controller.php
+++ b/app/Http/Controllers/Controller.php
@@ -37,7 +37,7 @@ class Controller extends BaseController
     public function email_verify(EmailVerificationRequest $request) {
         $request->fulfill();
         $name = request()->user()?->name;
-        send_internal_notification("User {$name} verified their email address.");
+        // send_internal_notification("User {$name} verified their email address.");
         return redirect(RouteServiceProvider::HOME);
     }
     public function forgot_password(Request $request) {

From d46ff768878afb7ce481465172ec26e48ccfb159 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 12:47:49 +0200
Subject: [PATCH 24/29] feat: Add container name to network aliases in
 ApplicationDeploymentJob

---
 app/Jobs/ApplicationDeploymentJob.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/Jobs/ApplicationDeploymentJob.php b/app/Jobs/ApplicationDeploymentJob.php
index da66671f3..e3221e091 100644
--- a/app/Jobs/ApplicationDeploymentJob.php
+++ b/app/Jobs/ApplicationDeploymentJob.php
@@ -1296,7 +1296,9 @@ class ApplicationDeploymentJob implements ShouldQueue, ShouldBeEncrypted
                     'expose' => $ports,
                     'networks' => [
                         $this->destination->network => [
-                            'aliases' => []
+                            'aliases' => [
+                                $this->container_name
+                            ]
                         ]
                     ],
                     'mem_limit' => $this->application->limits_memory,

From 6b4987bf395816b2ee71974dd507ffbecb2c3b30 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 12:52:06 +0200
Subject: [PATCH 25/29] fix: confirmation for custom labels

---
 app/Livewire/Project/Application/General.php                 | 1 -
 .../views/livewire/project/application/general.blade.php     | 5 ++++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/Livewire/Project/Application/General.php b/app/Livewire/Project/Application/General.php
index 873422985..2141a86d1 100644
--- a/app/Livewire/Project/Application/General.php
+++ b/app/Livewire/Project/Application/General.php
@@ -255,7 +255,6 @@ class General extends Component
     }
     public function resetDefaultLabels()
     {
-        ray('resetDefaultLabels');
         $this->customLabels = str(implode("|", generateLabelsApplication($this->application)))->replace("|", "\n");
         $this->ports_exposes = $this->application->ports_exposes;
 
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index c6aa05813..bd7e171ec 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -242,7 +242,10 @@
                     @endif
                 </div>
                 <x-forms.textarea label="Container Labels" rows="15" id="customLabels"></x-forms.textarea>
-                <x-forms.button wire:click="resetDefaultLabels">Reset to Coolify Generated Labels</x-forms.button>
+                <x-modal-confirmation buttonFullWidth action="resetDefaultLabels" buttonTitle="Reset to Coolify Generated Labels">
+                    Are you sure you want to reset the labels to Coolify generated labels? <br>It could break the proxy configuration after you restart the container.
+                </x-modal-confirmation>
+
             @endif
 
             <h3 class="pt-8">Pre/Post Deployment Commands</h3>

From eb41e023c719ec4ca1d42917efeea2fb7198910e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 13:03:55 +0200
Subject: [PATCH 26/29] feat: Add lazy loading for images in General.php and
 improve Docker Compose file handling in Application.php

---
 app/Livewire/Project/Application/General.php | 5 ++++-
 app/Models/Application.php                   | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/Livewire/Project/Application/General.php b/app/Livewire/Project/Application/General.php
index 2141a86d1..885f84247 100644
--- a/app/Livewire/Project/Application/General.php
+++ b/app/Livewire/Project/Application/General.php
@@ -298,7 +298,10 @@ class General extends Component
             }
 
             if ($this->application->build_pack === 'dockercompose' && $this->initialDockerComposeLocation !== $this->application->docker_compose_location) {
-                $this->loadComposeFile();
+                $compose_return = $this->loadComposeFile();
+                if ($compose_return instanceof \Livewire\Features\SupportEvents\Event) {
+                   return;
+                }
             }
             $this->validate();
             if ($this->ports_exposes !== $this->application->ports_exposes) {
diff --git a/app/Models/Application.php b/app/Models/Application.php
index 98b2c23b1..1ce33cefb 100644
--- a/app/Models/Application.php
+++ b/app/Models/Application.php
@@ -847,7 +847,7 @@ class Application extends BaseModel
         if (!$composeFileContent) {
             $this->docker_compose_location = $initialDockerComposeLocation;
             $this->save();
-            throw new \RuntimeException("Could not load base compose file from $workdir$composeFile");
+            throw new \RuntimeException("Docker Compose file not found at: $workdir$composeFile");
         } else {
             $this->docker_compose_raw = $composeFileContent;
             $this->save();

From 848e6102a1c99c1546eedef403d1f628c172e642 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 13:58:19 +0200
Subject: [PATCH 27/29] fix css here and there

---
 app/Livewire/Project/Application/Heading.php  |  1 -
 resources/css/app.css                         |  4 ++--
 resources/views/components/navbar.blade.php   |  2 +-
 .../components/notification/navbar.blade.php  |  2 +-
 .../components/security/navbar.blade.php      |  2 +-
 .../views/components/server/navbar.blade.php  |  2 +-
 .../components/settings/navbar.blade.php      |  2 +-
 .../views/components/team/navbar.blade.php    |  2 +-
 .../application/configuration.blade.php       |  4 ++--
 .../project/application/heading.blade.php     |  8 +++----
 .../project/database/configuration.blade.php  |  4 ++--
 .../project/database/heading.blade.php        |  4 ++--
 .../project/service/configuration.blade.php   | 24 +++++++++----------
 .../livewire/project/service/navbar.blade.php |  4 ++--
 .../views/livewire/settings/index.blade.php   |  4 ++--
 15 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/app/Livewire/Project/Application/Heading.php b/app/Livewire/Project/Application/Heading.php
index 0b1e6edf5..1b11d1f8d 100644
--- a/app/Livewire/Project/Application/Heading.php
+++ b/app/Livewire/Project/Application/Heading.php
@@ -4,7 +4,6 @@ namespace App\Livewire\Project\Application;
 
 use App\Actions\Application\StopApplication;
 use App\Events\ApplicationStatusChanged;
-use App\Jobs\ComplexContainerStatusJob;
 use App\Jobs\ContainerStatusJob;
 use App\Jobs\ServerStatusJob;
 use App\Models\Application;
diff --git a/resources/css/app.css b/resources/css/app.css
index c2a0ac73b..5858f5cc9 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -157,7 +157,7 @@ tr td:first-child {
 }
 
 .menu-item {
-    @apply flex items-center text-sm w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
+    @apply flex items-center w-full gap-3 px-2 py-1 text-sm sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 min-w-fit sm:min-w-64;
 }
 
 .menu-item-active {
@@ -185,7 +185,7 @@ tr td:first-child {
 }
 
 .navbar-main {
-    @apply flex h-fit flex-col md:flex-row justify-items-start sm:justify-between gap-4 pb-2 border-b-2 border-solid dark:border-coolgray-200 md:items-center;
+    @apply flex flex-col gap-4 pb-2 border-b-2 border-solid h-fit md:flex-row justify-items-start sm:justify-between dark:border-coolgray-200 md:items-center;
 }
 
 .loading {
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index aab4b6a7a..66fa1bbf3 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -84,7 +84,7 @@
         <livewire:switch-team />
     </div>
     <ul role="list" class="flex flex-col flex-1 gap-y-7">
-        <li class="flex-1 ">
+        <li class="flex-1 overflow-x-hidden">
             <ul role="list" class="flex flex-col h-full space-y-1.5">
                 @if (isSubscribed() || !isCloud())
                     <li>
diff --git a/resources/views/components/notification/navbar.blade.php b/resources/views/components/notification/navbar.blade.php
index ab04d5e19..0fbbc69a2 100644
--- a/resources/views/components/notification/navbar.blade.php
+++ b/resources/views/components/notification/navbar.blade.php
@@ -2,7 +2,7 @@
     <h1>Notifications</h1>
     <div class="subtitle">Get notified about your infrastructure.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
+        <nav class="flex items-center gap-6 min-h-10">
             <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
                 href="{{ route('notifications.email') }}">
                 <button>Email</button>
diff --git a/resources/views/components/security/navbar.blade.php b/resources/views/components/security/navbar.blade.php
index bee38855d..e389ad6b7 100644
--- a/resources/views/components/security/navbar.blade.php
+++ b/resources/views/components/security/navbar.blade.php
@@ -2,7 +2,7 @@
     <h1>Security</h1>
     <div class="subtitle">Security related settings.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
+        <nav class="flex items-center gap-6 scrollbar min-h-10">
             <a href="{{ route('security.private-key.index') }}">
                 <button>Private Keys</button>
             </a>
diff --git a/resources/views/components/server/navbar.blade.php b/resources/views/components/server/navbar.blade.php
index 9cae35eba..c24787e97 100644
--- a/resources/views/components/server/navbar.blade.php
+++ b/resources/views/components/server/navbar.blade.php
@@ -6,7 +6,7 @@
     </div>
     <div class="subtitle">{{ data_get($server, 'name') }}.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
+        <nav class="flex items-center gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap">
             <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.show', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
diff --git a/resources/views/components/settings/navbar.blade.php b/resources/views/components/settings/navbar.blade.php
index 1caf858d1..7b04b66b9 100644
--- a/resources/views/components/settings/navbar.blade.php
+++ b/resources/views/components/settings/navbar.blade.php
@@ -2,7 +2,7 @@
     <h1>Settings</h1>
     <div class="subtitle">Instance wide settings for Coolify.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
+        <nav class="flex items-center gap-6 min-h-10 whitespace-nowrap">
             <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
                 href="{{ route('settings.index') }}">
                 <button>Configuration</button>
diff --git a/resources/views/components/team/navbar.blade.php b/resources/views/components/team/navbar.blade.php
index a3d677b7d..8bcceeb87 100644
--- a/resources/views/components/team/navbar.blade.php
+++ b/resources/views/components/team/navbar.blade.php
@@ -7,7 +7,7 @@
     </div>
     <div class="subtitle">Team wide configurations.</div>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10">
+        <nav class="flex items-center gap-6 min-h-10">
             <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
                 <button>General</button>
             </a>
diff --git a/resources/views/livewire/project/application/configuration.blade.php b/resources/views/livewire/project/application/configuration.blade.php
index c93080183..5cb11cc88 100644
--- a/resources/views/livewire/project/application/configuration.blade.php
+++ b/resources/views/livewire/project/application/configuration.blade.php
@@ -2,8 +2,8 @@
     <h1>Configuration</h1>
     <livewire:project.shared.configuration-checker :resource="$application" />
     <livewire:project.application.heading :application="$application" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
-        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
+        <div class="flex gap-4 overflow-x-scroll sm:gap-2 sm:flex-col sm:overflow-x-hidden scrollbar whitespace-nowrap">
             <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
             @if ($application->destination->server->isSwarm())
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index 898890884..7cd686d83 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -1,7 +1,7 @@
 <nav wire:poll.5000ms="check_status">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" />
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0">
+        <nav class="flex items-center flex-shrink-0 gap-6 scrollbar min-h-10 whitespace-nowrap">
             <a href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
@@ -18,16 +18,16 @@
             @endif
             <x-applications.links :application="$application" />
         </nav>
-        <div class="flex items-center gap-2 order-first md:order-last flex-wrap md:flex-nowrap">
+        <div class="flex flex-wrap items-center gap-2">
             @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 class="md:order-first order-last">
+                <div>
                     <x-applications.advanced :application="$application" />
                 </div>
                 @endif
-                <div class="flex gap-2 flex-wrap">
+                <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'>
diff --git a/resources/views/livewire/project/database/configuration.blade.php b/resources/views/livewire/project/database/configuration.blade.php
index c95fe9880..4c0da6e02 100644
--- a/resources/views/livewire/project/database/configuration.blade.php
+++ b/resources/views/livewire/project/database/configuration.blade.php
@@ -2,8 +2,8 @@
     <h1>Configuration</h1>
     <livewire:project.shared.configuration-checker :resource="$database" />
     <livewire:project.database.heading :database="$database" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
-        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
+        <div class="flex gap-4 overflow-x-scroll sm:gap-2 sm:flex-col sm:overflow-x-hidden scrollbar whitespace-nowrap">
             <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general';
                 window.location.hash = 'general'"
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 2b79bd35a..0c0647324 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -7,7 +7,7 @@
         </x-slot:content>
     </x-slide-over>
     <div class="navbar-main">
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0">
+        <nav class="flex items-center flex-shrink-0 gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap">
             <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.configuration', $parameters) }}">
                 <button>Configuration</button>
@@ -31,7 +31,7 @@
                 </a>
             @endif
         </nav>
-        <div class="flex items-center gap-2 order-first sm:order-last flex-wrap">
+        <div class="flex flex-wrap items-center gap-2">
             @if (!str($database->status)->startsWith('exited'))
                 <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
                     <x-slot:button-title>
diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
index 94bcfaa15..a912cb58d 100644
--- a/resources/views/livewire/project/service/configuration.blade.php
+++ b/resources/views/livewire/project/service/configuration.blade.php
@@ -1,39 +1,39 @@
 <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.check_status" wire:poll.5000ms="check_status">
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
-        <div class="flex flex-col items-start gap-4 min-w-fit">
-            <a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>
-            <a :class="activeTab === 'service-stack' && 'dark:text-white'"
+    <div class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
+        <div class="flex flex-col items-start gap-2 min-w-fit">
+            <a class="menu-item sm:min-w-fit" target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'service-stack';
                 window.location.hash = 'service-stack'"
                 href="#">Service Stack</a>
-            <a :class="activeTab === 'environment-variables' && 'dark:text-white'"
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                 href="#">Environment
                 Variables</a>
-            <a :class="activeTab === 'storages' && 'dark:text-white'"
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'storages';
                 window.location.hash = 'storages'"
                 href="#">Storages</a>
-            <a :class="activeTab === 'execute-command' && 'dark:text-white'"
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'execute-command';
                 window.location.hash = 'execute-command'"
                 href="#">Execute Command</a>
-            <a :class="activeTab === 'logs' && 'dark:text-white'"
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'logs';
                 window.location.hash = 'logs'"
                 href="#">Logs</a>
-            <a :class="activeTab === 'webhooks' && 'dark:text-white'"
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
             </a>
-            <a :class="activeTab === 'resource-operations' && 'dark:text-white'"
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
                 href="#">Resource Operations
             </a>
-            <a :class="activeTab === 'tags' && 'dark:text-white'"
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
             </a>
-            <a :class="activeTab === 'danger' && 'dark:text-white'"
+            <a class="menu-item sm:min-w-fit"
                 @click.prevent="activeTab = 'danger';
                 window.location.hash = 'danger'"
                 href="#">Danger Zone
diff --git a/resources/views/livewire/project/service/navbar.blade.php b/resources/views/livewire/project/service/navbar.blade.php
index b72be5cd8..e972b3938 100644
--- a/resources/views/livewire/project/service/navbar.blade.php
+++ b/resources/views/livewire/project/service/navbar.blade.php
@@ -9,14 +9,14 @@
     <h1>Configuration</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data>
-        <nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0">
+        <nav class="flex items-center flex-shrink-0 gap-6 scrollbar min-h-10 whitespace-nowrap">
             <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.configuration', $parameters) }}">
                 <button>Configuration</button>
             </a>
             <x-services.links :service="$service" />
         </nav>
-        <div class="flex items-center gap-2 order-first sm:order-last flex-wrap">
+        <div class="flex flex-wrap items-center order-first gap-2 sm:order-last">
             @if (str($service->status())->contains('running'))
                 <button @click="$wire.dispatch('restartEvent')" class="gap-2 button">
                     <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/resources/views/livewire/settings/index.blade.php b/resources/views/livewire/settings/index.blade.php
index 1e8c23814..57c4e413c 100644
--- a/resources/views/livewire/settings/index.blade.php
+++ b/resources/views/livewire/settings/index.blade.php
@@ -1,7 +1,7 @@
 <div>
     <x-settings.navbar />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1 gap-8 sm:flex-row flex-col">
-        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-1 sm:flex-row">
+        <div class="flex gap-6 overflow-x-scroll sm:gap-2 sm:overflow-x-hidden scrollbar sm:flex-col whitespace-nowrap">
             <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
             <a class="menu-item" :class="activeTab === 'backup' && 'menu-item-active'"

From 92e99e3fb419d99fc3b0e1cee99720d93be2511b Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 14:00:20 +0200
Subject: [PATCH 28/29] chore: dark mode should be the default

---
 resources/views/layouts/base.blade.php | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 4d6f6596b..9d7a07434 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
     <link rel="dns-prefetch" href="https://api.fonts.coollabs.io" />
-    <link rel="preload" href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" />
+    <link rel="preload" href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+        as="style" />
     <link rel="preload" href="https://cdn.fonts.coollabs.io/inter/normal/400.woff2" as="style" />
     <link rel="preload" href="https://cdn.fonts.coollabs.io/inter/normal/500.woff2" as="style" />
     <link rel="preload" href="https://cdn.fonts.coollabs.io/inter/normal/600.woff2" as="style" />
@@ -49,11 +50,7 @@
             } else if (localStorage.theme === 'light') {
                 document.documentElement.classList.remove('dark')
             } else {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    document.documentElement.classList.add('dark')
-                } else {
-                    document.documentElement.classList.remove('dark')
-                }
+                document.documentElement.classList.add('dark')
             }
             @auth
             window.Pusher = Pusher;

From c194911458c5c447febebe09b0b685d36ad64af7 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 6 May 2024 14:01:07 +0200
Subject: [PATCH 29/29] revert

---
 resources/views/layouts/base.blade.php | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 9d7a07434..4d6f6596b 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -6,8 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
     <link rel="dns-prefetch" href="https://api.fonts.coollabs.io" />
-    <link rel="preload" href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
-        as="style" />
+    <link rel="preload" href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" />
     <link rel="preload" href="https://cdn.fonts.coollabs.io/inter/normal/400.woff2" as="style" />
     <link rel="preload" href="https://cdn.fonts.coollabs.io/inter/normal/500.woff2" as="style" />
     <link rel="preload" href="https://cdn.fonts.coollabs.io/inter/normal/600.woff2" as="style" />
@@ -50,7 +49,11 @@
             } else if (localStorage.theme === 'light') {
                 document.documentElement.classList.remove('dark')
             } else {
-                document.documentElement.classList.add('dark')
+                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.classList.add('dark')
+                } else {
+                    document.documentElement.classList.remove('dark')
+                }
             }
             @auth
             window.Pusher = Pusher;