ecada60c78
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>
56 lines
No EOL
2.4 KiB
PHP
56 lines
No EOL
2.4 KiB
PHP
<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 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>
|
|
<div class="pt-2 flex gap-2">
|
|
<div class="flex flex-col gap-2">
|
|
<x-forms.checkbox label="Escape special characters in labels?"
|
|
helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
|
|
id="isContainerLabelEscapeEnabled" instantSave></x-forms.checkbox>
|
|
<x-forms.checkbox label="Show Normal Textarea" x-model="showNormalTextarea"></x-forms.checkbox>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex w-full gap-2 pt-4">
|
|
<div x-cloak x-show="raw">
|
|
<x-forms.button class="w-64" @click.prevent="raw = !raw">Show Deployable Compose</x-forms.button>
|
|
</div>
|
|
<div x-cloak x-show="raw === false">
|
|
<x-forms.button class="w-64" @click.prevent="raw = !raw">Show Source
|
|
Compose</x-forms.button>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
@if (blank($service->service_type))
|
|
<x-forms.button class="w-28" wire:click.prevent='validateCompose'>
|
|
Validate
|
|
</x-forms.button>
|
|
@endif
|
|
<x-forms.button class="w-28" wire:click.prevent='saveEditedCompose'>
|
|
Save
|
|
</x-forms.button>
|
|
</div>
|
|
</div> |