rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix inconsistent modal height in Edit Docker Compose dialog

Browse source 
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>
This commit is contained in:
Andras Bacsai 2025-10-23 19:18:50 +02:00
parent 2d3a980594
commit ecada60c78
1 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
resources/views/livewire/project/service/edit-compose.blade.php
View file

@ -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>