From ecada60c78cbabda5e56fdc030f43c7e42a5c48b Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 23 Oct 2025 19:18:50 +0200
Subject: [PATCH] Fix inconsistent modal height in Edit Docker Compose dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The modal height was changing when switching between "Source Compose"
and "Deployable Compose" views due to different heights between the
Monaco editor and regular textareas.

Changes:
- Set fixed height (512px) for Monaco editor via CSS
- Increased textarea rows to 25 to match Monaco editor height
- Wrapped both views in a container with consistent styling
- Modal now maintains same height regardless of view

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../project/service/edit-compose.blade.php    | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/resources/views/livewire/project/service/edit-compose.blade.php b/resources/views/livewire/project/service/edit-compose.blade.php
index 313240849..2314b60c7 100644
--- a/resources/views/livewire/project/service/edit-compose.blade.php
+++ b/resources/views/livewire/project/service/edit-compose.blade.php
@@ -1,23 +1,30 @@
+<style>
+    .compose-editor-container .coolify-monaco-editor>div>div>div {
+        height: 512px !important;
+        min-height: 512px !important;
+    }
+</style>
 <div x-data="{ raw: true, showNormalTextarea: false }">
     <div class="pb-4">Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to
         prevent
         name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage
         menu.</div>
 
-    <div x-cloak x-show="raw" class="font-mono">
-        <div x-cloak x-show="showNormalTextarea">
-            <x-forms.textarea rows="20" id="dockerComposeRaw">
+    <div class="compose-editor-container">
+        <div x-cloak x-show="raw" class="font-mono">
+            <div x-cloak x-show="showNormalTextarea">
+                <x-forms.textarea rows="25" id="dockerComposeRaw">
+                </x-forms.textarea>
+            </div>
+            <div x-cloak x-show="!showNormalTextarea">
+                <x-forms.textarea allowTab useMonacoEditor monacoEditorLanguage="yaml" id="dockerComposeRaw">
+                </x-forms.textarea>
+            </div>
+        </div>
+        <div x-cloak x-show="raw === false" class="font-mono">
+            <x-forms.textarea rows="25" readonly id="dockerCompose">
             </x-forms.textarea>
         </div>
-        <div x-cloak x-show="!showNormalTextarea">
-            <x-forms.textarea allowTab useMonacoEditor monacoEditorLanguage="yaml" rows="20"
-                id="dockerComposeRaw">
-            </x-forms.textarea>
-        </div>
-    </div>
-    <div x-cloak x-show="raw === false" class="font-mono">
-        <x-forms.textarea rows="20" readonly id="dockerCompose">
-        </x-forms.textarea>
     </div>
     <div class="pt-2 flex gap-2">
         <div class="flex flex-col gap-2">
@@ -46,4 +53,4 @@
             Save
         </x-forms.button>
     </div>
-</div>
+</div>
\ No newline at end of file