From 54964d54d471a06d3a98209ab3ff15e83fbbbaeb Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 5 Nov 2025 08:59:05 +0100
Subject: [PATCH] fix: clean up utility classes and improve readability in
 Blade templates

---
 resources/css/utilities.css                   |   6 +-
 resources/views/layouts/app.blade.php         |  25 +-
 resources/views/layouts/base.blade.php        | 422 +++++++++---------
 .../project/application/general.blade.php     |  80 ++--
 4 files changed, 259 insertions(+), 274 deletions(-)

diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index f5d173204..5d8a6bfa1 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -124,7 +124,7 @@ @utility menu {
 }
 
 @utility menu-item {
-    @apply flex gap-3 items-center px-2 py-1 w-full 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 text-black dark:text-neutral-400;
+    @apply flex gap-3 items-center px-2 py-1 w-full 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;
 }
 
 @utility menu-item-active {
@@ -152,7 +152,7 @@ @utility custom-modal {
 }
 
 @utility navbar-main {
-    @apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 border-neutral-200 md:items-center;
+    @apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 border-neutral-200 md:items-center text-neutral-700 dark:text-neutral-400;
 }
 
 @utility loading {
@@ -220,7 +220,7 @@ @utility title {
 }
 
 @utility subtitle {
-    @apply pt-2 pb-9 text-neutral-500 dark:text-neutral-400;
+    @apply pt-2 pb-9;
 }
 
 @utility fullscreen {
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 01a128bd2..fae2e1b6d 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -9,16 +9,15 @@
     @auth
         <livewire:deployments-indicator />
         <div x-data="{
-                            open: false,
-                            init() {
-                                this.pageWidth = localStorage.getItem('pageWidth');
-                                if (!this.pageWidth) {
-                                    this.pageWidth = 'full';
-                                    localStorage.setItem('pageWidth', 'full');
-                                }
-                            }
-                        }" x-cloak class="mx-auto text-neutral-800 dark:text-white"
-            :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
+            open: false,
+            init() {
+                this.pageWidth = localStorage.getItem('pageWidth');
+                if (!this.pageWidth) {
+                    this.pageWidth = 'full';
+                    localStorage.setItem('pageWidth', 'full');
+                }
+            }
+        }" x-cloak class="mx-auto" :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
             <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
                 <div class="fixed inset-y-0 right-0 h-full flex">
@@ -56,8 +55,8 @@ class="text-xl font-bold tracking-wide dark:text-white hover:opacity-80 transiti
                 <button type="button" class="-m-2.5 p-2.5 dark:text-warning" x-on:click="open = !open">
                     <span class="sr-only">Open sidebar</span>
                     <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
-                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M4 6h16M4 12h16M4 18h16" />
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
                 </button>
             </div>
@@ -69,4 +68,4 @@ class="text-xl font-bold tracking-wide dark:text-white hover:opacity-80 transiti
             </main>
         </div>
     @endauth
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 0bb7a3c34..c577f7248 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -2,7 +2,7 @@
 <html data-theme="dark" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <script>
     // Immediate theme application - runs before any rendering
-    (function () {
+    (function() {
         const t = localStorage.theme || 'dark';
         const d = t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
         document.documentElement.classList[d ? 'add' : 'remove']('dark');
@@ -75,102 +75,102 @@
 </head>
 @section('body')
 
-<body>
-    <x-toast />
-    <script data-navigate-once>
-        // Global HTML sanitization function using DOMPurify
-        window.sanitizeHTML = function (html) {
-            if (!html) return '';
-            const URL_RE = /^(https?:|mailto:)/i;
-            const config = {
-                ALLOWED_TAGS: ['a', 'b', 'br', 'code', 'del', 'div', 'em', 'i', 'p', 'pre', 's', 'span', 'strong',
-                    'u'
-                ],
-                ALLOWED_ATTR: ['class', 'href', 'target', 'title', 'rel'],
-                ALLOW_DATA_ATTR: false,
-                FORBID_TAGS: ['script', 'object', 'embed', 'applet', 'iframe', 'form', 'input', 'button', 'select',
-                    'textarea', 'details', 'summary', 'dialog', 'style'
-                ],
-                FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange',
-                    'onsubmit', 'ontoggle', 'style'
-                ],
-                KEEP_CONTENT: true,
-                RETURN_DOM: false,
-                RETURN_DOM_FRAGMENT: false,
-                SANITIZE_DOM: true,
-                SANITIZE_NAMED_PROPS: true,
-                SAFE_FOR_TEMPLATES: true,
-                ALLOWED_URI_REGEXP: URL_RE
+    <body>
+        <x-toast />
+        <script data-navigate-once>
+            // Global HTML sanitization function using DOMPurify
+            window.sanitizeHTML = function(html) {
+                if (!html) return '';
+                const URL_RE = /^(https?:|mailto:)/i;
+                const config = {
+                    ALLOWED_TAGS: ['a', 'b', 'br', 'code', 'del', 'div', 'em', 'i', 'p', 'pre', 's', 'span', 'strong',
+                        'u'
+                    ],
+                    ALLOWED_ATTR: ['class', 'href', 'target', 'title', 'rel'],
+                    ALLOW_DATA_ATTR: false,
+                    FORBID_TAGS: ['script', 'object', 'embed', 'applet', 'iframe', 'form', 'input', 'button', 'select',
+                        'textarea', 'details', 'summary', 'dialog', 'style'
+                    ],
+                    FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange',
+                        'onsubmit', 'ontoggle', 'style'
+                    ],
+                    KEEP_CONTENT: true,
+                    RETURN_DOM: false,
+                    RETURN_DOM_FRAGMENT: false,
+                    SANITIZE_DOM: true,
+                    SANITIZE_NAMED_PROPS: true,
+                    SAFE_FOR_TEMPLATES: true,
+                    ALLOWED_URI_REGEXP: URL_RE
+                };
+
+                // One-time hook registration (idempotent pattern)
+                if (!window.__dpLinkHook) {
+                    DOMPurify.addHook('afterSanitizeAttributes', node => {
+                        // Remove Alpine.js directives to prevent XSS
+                        if (node.hasAttributes && node.hasAttributes()) {
+                            const attrs = Array.from(node.attributes);
+                            attrs.forEach(attr => {
+                                // Remove x-* attributes (Alpine directives)
+                                if (attr.name.startsWith('x-')) {
+                                    node.removeAttribute(attr.name);
+                                }
+                                // Remove @* attributes (Alpine event shorthand)
+                                if (attr.name.startsWith('@')) {
+                                    node.removeAttribute(attr.name);
+                                }
+                                // Remove :* attributes (Alpine binding shorthand)
+                                if (attr.name.startsWith(':')) {
+                                    node.removeAttribute(attr.name);
+                                }
+                            });
+                        }
+
+                        // Existing link sanitization
+                        if (node.nodeName === 'A' && node.hasAttribute('href')) {
+                            const href = node.getAttribute('href') || '';
+                            if (!URL_RE.test(href)) node.removeAttribute('href');
+                            if (node.getAttribute('target') === '_blank') {
+                                node.setAttribute('rel', 'noopener noreferrer');
+                            }
+                        }
+                    });
+                    window.__dpLinkHook = true;
+                }
+                return DOMPurify.sanitize(html, config);
             };
 
-            // One-time hook registration (idempotent pattern)
-            if (!window.__dpLinkHook) {
-                DOMPurify.addHook('afterSanitizeAttributes', node => {
-                    // Remove Alpine.js directives to prevent XSS
-                    if (node.hasAttributes && node.hasAttributes()) {
-                        const attrs = Array.from(node.attributes);
-                        attrs.forEach(attr => {
-                            // Remove x-* attributes (Alpine directives)
-                            if (attr.name.startsWith('x-')) {
-                                node.removeAttribute(attr.name);
-                            }
-                            // Remove @* attributes (Alpine event shorthand)
-                            if (attr.name.startsWith('@')) {
-                                node.removeAttribute(attr.name);
-                            }
-                            // Remove :* attributes (Alpine binding shorthand)
-                            if (attr.name.startsWith(':')) {
-                                node.removeAttribute(attr.name);
-                            }
-                        });
-                    }
-
-                    // Existing link sanitization
-                    if (node.nodeName === 'A' && node.hasAttribute('href')) {
-                        const href = node.getAttribute('href') || '';
-                        if (!URL_RE.test(href)) node.removeAttribute('href');
-                        if (node.getAttribute('target') === '_blank') {
-                            node.setAttribute('rel', 'noopener noreferrer');
-                        }
-                    }
-                });
-                window.__dpLinkHook = true;
+            // Initialize theme if not set
+            if (!('theme' in localStorage)) {
+                localStorage.theme = 'dark';
             }
-            return DOMPurify.sanitize(html, config);
-        };
 
-        // Initialize theme if not set
-        if (!('theme' in localStorage)) {
-            localStorage.theme = 'dark';
-        }
+            let theme = localStorage.theme
+            let cpuColor = '#1e90ff'
+            let ramColor = '#00ced1'
+            let textColor = '#ffffff'
+            let editorBackground = '#181818'
+            let editorTheme = 'blackboard'
 
-        let theme = localStorage.theme
-        let cpuColor = '#1e90ff'
-        let ramColor = '#00ced1'
-        let textColor = '#ffffff'
-        let editorBackground = '#181818'
-        let editorTheme = 'blackboard'
-
-        function checkTheme() {
-            theme = localStorage.theme
-            if (theme == 'system') {
-                theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+            function checkTheme() {
+                theme = localStorage.theme
+                if (theme == 'system') {
+                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+                }
+                if (theme == 'dark') {
+                    cpuColor = '#1e90ff'
+                    ramColor = '#00ced1'
+                    textColor = '#ffffff'
+                    editorBackground = '#181818'
+                    editorTheme = 'blackboard'
+                } else {
+                    cpuColor = '#1e90ff'
+                    ramColor = '#00ced1'
+                    textColor = '#000000'
+                    editorBackground = '#ffffff'
+                    editorTheme = null
+                }
             }
-            if (theme == 'dark') {
-                cpuColor = '#1e90ff'
-                ramColor = '#00ced1'
-                textColor = '#ffffff'
-                editorBackground = '#181818'
-                editorTheme = 'blackboard'
-            } else {
-                cpuColor = '#1e90ff'
-                ramColor = '#00ced1'
-                textColor = '#000000'
-                editorBackground = '#ffffff'
-                editorTheme = null
-            }
-        }
-        @auth
+            @auth
             window.Pusher = Pusher;
             window.Echo = new Echo({
                 broadcaster: 'pusher',
@@ -199,131 +199,131 @@ function checkTheme() {
                 // Maximum number of reconnection attempts
                 maxAttempts: 15
             });
-        @endauth
-        let checkHealthInterval = null;
-        let checkIfIamDeadInterval = null;
+            @endauth
+            let checkHealthInterval = null;
+            let checkIfIamDeadInterval = null;
 
-        function changePasswordFieldType(event) {
-            let element = event.target
-            for (let i = 0; i < 10; i++) {
-                if (element.className === "relative") {
-                    break;
+            function changePasswordFieldType(event) {
+                let element = event.target
+                for (let i = 0; i < 10; i++) {
+                    if (element.className === "relative") {
+                        break;
+                    }
+                    element = element.parentElement;
                 }
-                element = element.parentElement;
-            }
-            element = element.children[1];
-            if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
-                if (element.type === 'password') {
-                    element.type = 'text';
-                    if (element.disabled) return;
-                    element.classList.add('truncate');
-                    this.type = 'text';
-                } else {
-                    element.type = 'password';
-                    if (element.disabled) return;
-                    element.classList.remove('truncate');
-                    this.type = 'password';
+                element = element.children[1];
+                if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
+                    if (element.type === 'password') {
+                        element.type = 'text';
+                        if (element.disabled) return;
+                        element.classList.add('truncate');
+                        this.type = 'text';
+                    } else {
+                        element.type = 'password';
+                        if (element.disabled) return;
+                        element.classList.remove('truncate');
+                        this.type = 'password';
+                    }
                 }
             }
-        }
 
-        function copyToClipboard(text) {
-            navigator?.clipboard?.writeText(text) && window.Livewire.dispatch('success', 'Copied to clipboard.');
-        }
-        document.addEventListener('livewire:init', () => {
-            window.Livewire.on('reloadWindow', (timeout) => {
-                if (timeout) {
-                    setTimeout(() => {
+            function copyToClipboard(text) {
+                navigator?.clipboard?.writeText(text) && window.Livewire.dispatch('success', 'Copied to clipboard.');
+            }
+            document.addEventListener('livewire:init', () => {
+                window.Livewire.on('reloadWindow', (timeout) => {
+                    if (timeout) {
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, timeout);
+                        return;
+                    } else {
                         window.location.reload();
-                    }, timeout);
-                    return;
-                } else {
-                    window.location.reload();
-                }
-            })
-            window.Livewire.on('info', (message) => {
-                if (typeof message === 'string') {
-                    window.toast('Info', {
-                        type: 'info',
-                        description: message,
-                    })
-                    return;
-                }
-                if (message.length == 1) {
-                    window.toast('Info', {
-                        type: 'info',
-                        description: message[0],
-                    })
-                } else if (message.length == 2) {
-                    window.toast(message[0], {
-                        type: 'info',
-                        description: message[1],
-                    })
-                }
-            })
-            window.Livewire.on('error', (message) => {
-                if (typeof message === 'string') {
-                    window.toast('Error', {
-                        type: 'danger',
-                        description: message,
-                    })
-                    return;
-                }
-                if (message.length == 1) {
-                    window.toast('Error', {
-                        type: 'danger',
-                        description: message[0],
-                    })
-                } else if (message.length == 2) {
-                    window.toast(message[0], {
-                        type: 'danger',
-                        description: message[1],
-                    })
-                }
-            })
-            window.Livewire.on('warning', (message) => {
-                if (typeof message === 'string') {
-                    window.toast('Warning', {
-                        type: 'warning',
-                        description: message,
-                    })
-                    return;
-                }
-                if (message.length == 1) {
-                    window.toast('Warning', {
-                        type: 'warning',
-                        description: message[0],
-                    })
-                } else if (message.length == 2) {
-                    window.toast(message[0], {
-                        type: 'warning',
-                        description: message[1],
-                    })
-                }
-            })
-            window.Livewire.on('success', (message) => {
-                if (typeof message === 'string') {
-                    window.toast('Success', {
-                        type: 'success',
-                        description: message,
-                    })
-                    return;
-                }
-                if (message.length == 1) {
-                    window.toast('Success', {
-                        type: 'success',
-                        description: message[0],
-                    })
-                } else if (message.length == 2) {
-                    window.toast(message[0], {
-                        type: 'success',
-                        description: message[1],
-                    })
-                }
-            })
-        });
-    </script>
-</body>
+                    }
+                })
+                window.Livewire.on('info', (message) => {
+                    if (typeof message === 'string') {
+                        window.toast('Info', {
+                            type: 'info',
+                            description: message,
+                        })
+                        return;
+                    }
+                    if (message.length == 1) {
+                        window.toast('Info', {
+                            type: 'info',
+                            description: message[0],
+                        })
+                    } else if (message.length == 2) {
+                        window.toast(message[0], {
+                            type: 'info',
+                            description: message[1],
+                        })
+                    }
+                })
+                window.Livewire.on('error', (message) => {
+                    if (typeof message === 'string') {
+                        window.toast('Error', {
+                            type: 'danger',
+                            description: message,
+                        })
+                        return;
+                    }
+                    if (message.length == 1) {
+                        window.toast('Error', {
+                            type: 'danger',
+                            description: message[0],
+                        })
+                    } else if (message.length == 2) {
+                        window.toast(message[0], {
+                            type: 'danger',
+                            description: message[1],
+                        })
+                    }
+                })
+                window.Livewire.on('warning', (message) => {
+                    if (typeof message === 'string') {
+                        window.toast('Warning', {
+                            type: 'warning',
+                            description: message,
+                        })
+                        return;
+                    }
+                    if (message.length == 1) {
+                        window.toast('Warning', {
+                            type: 'warning',
+                            description: message[0],
+                        })
+                    } else if (message.length == 2) {
+                        window.toast(message[0], {
+                            type: 'warning',
+                            description: message[1],
+                        })
+                    }
+                })
+                window.Livewire.on('success', (message) => {
+                    if (typeof message === 'string') {
+                        window.toast('Success', {
+                            type: 'success',
+                            description: message,
+                        })
+                        return;
+                    }
+                    if (message.length == 1) {
+                        window.toast('Success', {
+                            type: 'success',
+                            description: message[0],
+                        })
+                    } else if (message.length == 2) {
+                        window.toast(message[0], {
+                            type: 'success',
+                            description: message[1],
+                        })
+                    }
+                })
+            });
+        </script>
+    </body>
 @show
 
-</html>
\ No newline at end of file
+</html>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index bfec17dc6..8e614a4e9 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -23,16 +23,15 @@
             @if (!$application->dockerfile && $application->build_pack !== 'dockerimage')
                 <div class="flex flex-col gap-2">
                     <div class="flex gap-2">
-                        <x-forms.select x-bind:disabled="shouldDisable()" wire:model.live="buildPack"
-                            label="Build Pack" required>
+                        <x-forms.select x-bind:disabled="shouldDisable()" wire:model.live="buildPack" label="Build Pack"
+                            required>
                             <option value="nixpacks">Nixpacks</option>
                             <option value="static">Static</option>
                             <option value="dockerfile">Dockerfile</option>
                             <option value="dockercompose">Docker Compose</option>
                         </x-forms.select>
                         @if ($application->settings->is_static || $application->build_pack === 'static')
-                            <x-forms.select x-bind:disabled="!canUpdate" id="staticImage"
-                                label="Static Image" required>
+                            <x-forms.select x-bind:disabled="!canUpdate" id="staticImage" label="Static Image" required>
                                 <option value="nginx:alpine">nginx:alpine</option>
                                 <option disabled value="apache:alpine">apache:alpine</option>
                             </x-forms.select>
@@ -75,7 +74,9 @@
                         submitAction="generateNginxConfiguration('{{ $application->settings->is_spa ? 'spa' : 'static' }}')"
                         :actions="[
                             'This will overwrite your current custom Nginx configuration.',
-                            'The default configuration will be generated based on your application type (' . ($application->settings->is_spa ? 'SPA' : 'static') . ').',
+                            'The default configuration will be generated based on your application type (' .
+                            ($application->settings->is_spa ? 'SPA' : 'static') .
+                            ').',
                         ]" />
                 @endcan
             @endif
@@ -94,13 +95,11 @@
             @if ($application->build_pack !== 'dockercompose')
                 <div class="flex items-end gap-2">
                     @if ($application->settings->is_container_label_readonly_enabled == false)
-                        <x-forms.input placeholder="https://coolify.io" wire:model="fqdn"
-                            label="Domains" readonly
+                        <x-forms.input placeholder="https://coolify.io" wire:model="fqdn" label="Domains" readonly
                             helper="Readonly labels are disabled. You can set the domains in the labels section."
                             x-bind:disabled="!canUpdate" />
                     @else
-                        <x-forms.input placeholder="https://coolify.io" wire:model="fqdn"
-                            label="Domains"
+                        <x-forms.input placeholder="https://coolify.io" wire:model="fqdn" label="Domains"
                             helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "
                             x-bind:disabled="!canUpdate" />
                         @can('update', $application)
@@ -210,21 +209,17 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                     <x-forms.input
                         helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
                         placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k --hostname=myapp"
-                        id="customDockerRunOptions" label="Custom Docker Options"
-                        x-bind:disabled="!canUpdate" />
+                        id="customDockerRunOptions" label="Custom Docker Options" x-bind:disabled="!canUpdate" />
                 @else
                     @if ($application->could_set_build_commands())
                         @if ($application->build_pack === 'nixpacks')
                             <div class="flex flex-col gap-2 xl:flex-row">
                                 <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
-                                    id="installCommand" label="Install Command"
-                                    x-bind:disabled="!canUpdate" />
+                                    id="installCommand" label="Install Command" x-bind:disabled="!canUpdate" />
                                 <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
-                                    id="buildCommand" label="Build Command"
-                                    x-bind:disabled="!canUpdate" />
+                                    id="buildCommand" label="Build Command" x-bind:disabled="!canUpdate" />
                                 <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
-                                    id="startCommand" label="Start Command"
-                                    x-bind:disabled="!canUpdate" />
+                                    id="startCommand" label="Start Command" x-bind:disabled="!canUpdate" />
                             </div>
                             <div class="pt-1 text-xs">Nixpacks will detect the required configuration
                                 automatically.
@@ -246,13 +241,12 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                             id="baseDirectory" label="Base Directory"
                                             helper="Directory to use as root. Useful for monorepos." />
                                         <x-forms.input x-bind:disabled="shouldDisable()"
-                                            placeholder="/docker-compose.yaml"
-                                            id="dockerComposeLocation" label="Docker Compose Location"
+                                            placeholder="/docker-compose.yaml" id="dockerComposeLocation"
+                                            label="Docker Compose Location"
                                             helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }}</span>" />
                                     </div>
                                     <div class="w-96">
-                                        <x-forms.checkbox instantSave
-                                            id="isPreserveRepositoryEnabled"
+                                        <x-forms.checkbox instantSave id="isPreserveRepositoryEnabled"
                                             label="Preserve Repository During Deployment"
                                             helper="Git repository (based on the base directory settings) will be copied to the deployment directory."
                                             x-bind:disabled="shouldDisable()" />
@@ -264,13 +258,11 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                         you doing.</div>
                                     <div class="flex gap-2">
                                         <x-forms.input x-bind:disabled="shouldDisable()"
-                                            placeholder="docker compose build"
-                                            id="dockerComposeCustomBuildCommand"
+                                            placeholder="docker compose build" id="dockerComposeCustomBuildCommand"
                                             helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} build</span>"
                                             label="Custom Build Command" />
                                         <x-forms.input x-bind:disabled="shouldDisable()"
-                                            placeholder="docker compose up -d"
-                                            id="dockerComposeCustomStartCommand"
+                                            placeholder="docker compose up -d" id="dockerComposeCustomStartCommand"
                                             helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} up -d</span>"
                                             label="Custom Start Command" />
                                     </div>
@@ -278,15 +270,14 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                         <div class="pt-4">
                                             <x-forms.textarea
                                                 helper="Order-based pattern matching to filter Git webhook deployments. Supports wildcards (*, **, ?) and negation (!). Last matching pattern wins."
-                                                placeholder="services/api/**" id="watchPaths"
-                                                label="Watch Paths" x-bind:disabled="shouldDisable()" />
+                                                placeholder="services/api/**" id="watchPaths" label="Watch Paths"
+                                                x-bind:disabled="shouldDisable()" />
                                         </div>
                                     @endif
                                 </div>
                             @else
                                 <div class="flex flex-col gap-2 xl:flex-row">
-                                    <x-forms.input placeholder="/" id="baseDirectory"
-                                        label="Base Directory"
+                                    <x-forms.input placeholder="/" id="baseDirectory" label="Base Directory"
                                         helper="Directory to use as root. Useful for monorepos."
                                         x-bind:disabled="!canUpdate" />
                                     @if ($application->build_pack === 'dockerfile' && !$application->dockerfile)
@@ -297,8 +288,7 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                     @endif
 
                                     @if ($application->build_pack === 'dockerfile')
-                                        <x-forms.input id="dockerfileTargetBuild"
-                                            label="Docker Build Stage Target"
+                                        <x-forms.input id="dockerfileTargetBuild" label="Docker Build Stage Target"
                                             helper="Useful if you have multi-staged dockerfile."
                                             x-bind:disabled="!canUpdate" />
                                     @endif
@@ -317,8 +307,8 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                     <div class="pb-4">
                                         <x-forms.textarea
                                             helper="Order-based pattern matching to filter Git webhook deployments. Supports wildcards (*, **, ?) and negation (!). Last matching pattern wins."
-                                            placeholder="src/pages/**" id="watchPaths"
-                                            label="Watch Paths" x-bind:disabled="!canUpdate" />
+                                            placeholder="src/pages/**" id="watchPaths" label="Watch Paths"
+                                            x-bind:disabled="!canUpdate" />
                                     </div>
                                 @endif
                                 <x-forms.input
@@ -331,8 +321,8 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                                     <div class="pt-2 w-96">
                                         <x-forms.checkbox
                                             helper="Use a build server to build your application. You can configure your build server in the Server settings. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
-                                            instantSave id="isBuildServerEnabled"
-                                            label="Use a Build Server?" x-bind:disabled="!canUpdate" />
+                                            instantSave id="isBuildServerEnabled" label="Use a Build Server?"
+                                            x-bind:disabled="!canUpdate" />
                                     </div>
                                 @endif
                         @endif
@@ -359,8 +349,7 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                             helper="You need to modify the docker compose file in the git repository."
                             monacoEditorLanguage="yaml" useMonacoEditor />
                     @endif
-                    <x-forms.textarea rows="10" readonly id="dockerCompose"
-                        label="Docker Compose Content"
+                    <x-forms.textarea rows="10" readonly id="dockerCompose" label="Docker Compose Content"
                         helper="You need to modify the docker compose file in the git repository."
                         monacoEditorLanguage="yaml" useMonacoEditor />
                 @endif
@@ -386,13 +375,11 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                             x-bind:disabled="!canUpdate" />
                     @else
                         @if ($application->settings->is_container_label_readonly_enabled === false)
-                            <x-forms.input placeholder="3000,3001" id="portsExposes"
-                                label="Ports Exposes" readonly
+                            <x-forms.input placeholder="3000,3001" id="portsExposes" label="Ports Exposes" readonly
                                 helper="Readonly labels are disabled. You can set the ports manually in the labels section."
                                 x-bind:disabled="!canUpdate" />
                         @else
-                            <x-forms.input placeholder="3000,3001" id="portsExposes"
-                                label="Ports Exposes" required
+                            <x-forms.input placeholder="3000,3001" id="portsExposes" label="Ports Exposes" required
                                 helper="A comma separated list of ports your application uses. The first port will be used as default healthcheck port if nothing defined in the Healthcheck menu. Be sure to set this correctly."
                                 x-bind:disabled="!canUpdate" />
                         @endif
@@ -413,15 +400,14 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                 <div>
                     <div class="w-96">
                         <x-forms.checkbox helper="This will add the proper proxy labels to the container." instantSave
-                            label="Enable" id="isHttpBasicAuthEnabled"
-                            x-bind:disabled="!canUpdate" />
+                            label="Enable" id="isHttpBasicAuthEnabled" x-bind:disabled="!canUpdate" />
                     </div>
                     @if ($application->is_http_basic_auth_enabled)
                         <div class="flex gap-2 py-2">
                             <x-forms.input id="httpBasicAuthUsername" label="Username" required
                                 x-bind:disabled="!canUpdate" />
-                            <x-forms.input id="httpBasicAuthPassword" type="password" label="Password"
-                                required x-bind:disabled="!canUpdate" />
+                            <x-forms.input id="httpBasicAuthPassword" type="password" label="Password" required
+                                x-bind:disabled="!canUpdate" />
                         </div>
                     @endif
                 </div>
@@ -472,8 +458,8 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                     id="postDeploymentCommand" label="Post-deployment "
                     helper="An optional script or command to execute in the newly built container after the deployment completes.<br>It is always executed with 'sh -c', so you do not need add it manually." />
                 @if ($application->build_pack === 'dockercompose')
-                    <x-forms.input x-bind:disabled="shouldDisable()"
-                        id="postDeploymentCommandContainer" label="Container Name"
+                    <x-forms.input x-bind:disabled="shouldDisable()" id="postDeploymentCommandContainer"
+                        label="Container Name"
                         helper="The name of the container to execute within. You can leave it blank if your application only has one container." />
                 @endif
             </div>