From 0bb47dfa566bb4635cb17988eccd5fb74bd525f2 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 28 Mar 2025 22:10:15 +0100
Subject: [PATCH] refactor(file-storage): improve layout and structure of input
 fields

---
 .../project/service/file-storage.blade.php    | 17 ++---
 .../project/shared/storages/show.blade.php    | 76 ++++++++++---------
 2 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/resources/views/livewire/project/service/file-storage.blade.php b/resources/views/livewire/project/service/file-storage.blade.php
index c1479a9f9..594f9f7cc 100644
--- a/resources/views/livewire/project/service/file-storage.blade.php
+++ b/resources/views/livewire/project/service/file-storage.blade.php
@@ -1,16 +1,9 @@
-<div class="py-4 ">
+<div class="">
     <div class="flex flex-col justify-center pb-4 text-sm select-text">
-        {{-- @if (data_get($resource, 'build_pack') === 'dockercompose')
-            <h4>{{ data_get($resource, 'name', 'unknown') }}</h4>
-        @endif --}}
-        @if ($fileStorage->is_directory)
-            <h4 class="dark:text-white pt-4 border-t dark:border-coolgray-200">Directory Mount</h4>
-        @else
-            <h4 class="dark:text-white pt-4 border-t dark:border-coolgray-200">File Mount</h4>
-        @endif
-
-        <x-forms.input label="Source Path" :value="$fileStorage->fs_path" readonly />
-        <x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
+        <div class="flex gap-2  md:flex-row flex-col pt-4">
+            <x-forms.input label="Source Path" :value="$fileStorage->fs_path" readonly />
+            <x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
+        </div>
     </div>
     <form wire:submit='submit' class="flex flex-col gap-2">
         <div class="flex gap-2">
diff --git a/resources/views/livewire/project/shared/storages/show.blade.php b/resources/views/livewire/project/shared/storages/show.blade.php
index f64e5d77b..339942ccb 100644
--- a/resources/views/livewire/project/shared/storages/show.blade.php
+++ b/resources/views/livewire/project/shared/storages/show.blade.php
@@ -2,45 +2,53 @@
     <form wire:submit='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
         @if ($isReadOnly)
             @if ($isFirst)
-                @if (
-                    $storage->resource_type === 'App\Models\ServiceApplication' ||
-                        $storage->resource_type === 'App\Models\ServiceDatabase')
-                    <x-forms.input id="storage.name" label="Volume Name" required readonly
-                        helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
-                @else
-                    <x-forms.input id="storage.name" label="Volume Name" required
-                        helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
-                @endif
-                @if ($isService || $startedAt)
-                    <x-forms.input id="storage.host_path" readonly helper="Directory on the host system."
-                        label="Source Path"
-                        helper="Warning: Changing the source path after the initial start could cause problems. Only use it when you know what are you doing." />
-                    <x-forms.input id="storage.mount_path" label="Destination Path"
-                        helper="Directory inside the container." required readonly />
-                @else
-                    <x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path"
-                        helper="Warning: Changing the source path after the initial start could cause problems. Only use it when you know what are you doing." />
-                    <x-forms.input id="storage.mount_path" label="Destination Path"
-                        helper="Directory inside the container." required readonly />
-                    <x-forms.button type="submit">
-                        Update
-                    </x-forms.button>
-                @endif
+                <div class="flex gap-2 items-end w-full  md:flex-row flex-col">
+                    @if (
+                        $storage->resource_type === 'App\Models\ServiceApplication' ||
+                            $storage->resource_type === 'App\Models\ServiceDatabase')
+                        <x-forms.input id="storage.name" label="Volume Name" required readonly
+                            helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
+                    @else
+                        <x-forms.input id="storage.name" label="Volume Name" required
+                            helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
+                    @endif
+                    @if ($isService || $startedAt)
+                        <x-forms.input id="storage.host_path" readonly helper="Directory on the host system."
+                            label="Source Path"
+                            helper="Warning: Changing the source path after the initial start could cause problems. Only use it when you know what are you doing." />
+                        <x-forms.input id="storage.mount_path" label="Destination Path"
+                            helper="Directory inside the container." required readonly />
+                    @else
+                        <x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path"
+                            helper="Warning: Changing the source path after the initial start could cause problems. Only use it when you know what are you doing." />
+                        <x-forms.input id="storage.mount_path" label="Destination Path"
+                            helper="Directory inside the container." required readonly />
+                        <x-forms.button type="submit">
+                            Update
+                        </x-forms.button>
+                    @endif
+                </div>
             @else
-                <x-forms.input id="storage.name" required readonly />
-                <x-forms.input id="storage.host_path" readonly />
-                <x-forms.input id="storage.mount_path" required readonly />
+                <div class="flex gap-2 items-end w-full">
+                    <x-forms.input id="storage.name" required readonly />
+                    <x-forms.input id="storage.host_path" readonly />
+                    <x-forms.input id="storage.mount_path" required readonly />
+                </div>
             @endif
         @else
             @if ($isFirst)
-                <x-forms.input id="storage.name" label="Volume Name" required />
-                <x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path" />
-                <x-forms.input id="storage.mount_path" label="Destination Path" helper="Directory inside the container."
-                    required />
+                <div class="flex gap-2 items-end w-full">
+                    <x-forms.input id="storage.name" label="Volume Name" required />
+                    <x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path" />
+                    <x-forms.input id="storage.mount_path" label="Destination Path"
+                        helper="Directory inside the container." required />
+                </div>
             @else
-                <x-forms.input id="storage.name" required />
-                <x-forms.input id="storage.host_path" />
-                <x-forms.input id="storage.mount_path" required />
+                <div class="flex gap-2 items-end w-full">
+                    <x-forms.input id="storage.name" required />
+                    <x-forms.input id="storage.host_path" />
+                    <x-forms.input id="storage.mount_path" required />
+                </div>
             @endif
             <div class="flex gap-2">
                 <x-forms.button type="submit">