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] 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">