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] 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 @@
 
 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 @@ .menu {
 }
 
 .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 @@ .custom-modal {
 }
 
 .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'"