From 12766695c43201b8d3825776ae9c8216712e11e1 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Mon, 27 Oct 2025 11:18:25 +0100
Subject: [PATCH] feat: add dynamic viewport-based height for compose editor

- Add Alpine.js reactive height calculation based on viewport size
- Monaco editor now responds to window resize events
- Fix Livewire component structure by moving style tag inside root div
- Update CLAUDE.md to document critical single root element requirement
- Set minimum editor height of 300px with responsive maximum
- Use CSS custom properties to pass calculated height to components
---
 CLAUDE.md                                     |  1 +
 .../components/forms/monaco-editor.blade.php  |  2 +-
 .../project/service/edit-compose.blade.php    | 28 +++++++++++++------
 templates/service-templates-latest.json       |  2 +-
 templates/service-templates.json              |  2 +-
 5 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 34149d28a..6434ef877 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -146,6 +146,7 @@ ### Livewire Component Structure
 - State management handled on the server
 - Use wire:model for two-way data binding
 - Dispatch events for component communication
+- **CRITICAL**: Livewire component views **MUST** have exactly ONE root element. ALL content must be contained within this single root element. Placing ANY elements (`<style>`, `<script>`, `<div>`, comments, or any other HTML) outside the root element will break Livewire's component tracking and cause `wire:click` and other directives to fail silently.
 
 ### Code Organization Patterns
 - **Actions Pattern**: Use Actions for complex business logic (`app/Actions/`)
diff --git a/resources/views/components/forms/monaco-editor.blade.php b/resources/views/components/forms/monaco-editor.blade.php
index 36da2ebcb..024580ae7 100644
--- a/resources/views/components/forms/monaco-editor.blade.php
+++ b/resources/views/components/forms/monaco-editor.blade.php
@@ -104,7 +104,7 @@
         }, 5);" :id="monacoId">
         </div>
         <div class="relative z-10 w-full h-full">
-            <div x-ref="monacoEditorElement" class="w-full h-[calc(100vh-20rem)] min-h-96 text-md {{ $readonly ? 'opacity-65' : '' }}"></div>
+            <div x-ref="monacoEditorElement" class="w-full text-md {{ $readonly ? 'opacity-65' : '' }}" style="height: var(--editor-height, calc(100vh - 20rem)); min-height: 300px;"></div>
             <div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
                 :style="'font-size: ' + monacoFontSize"
                 class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"
diff --git a/resources/views/livewire/project/service/edit-compose.blade.php b/resources/views/livewire/project/service/edit-compose.blade.php
index 2314b60c7..25f2f5abd 100644
--- a/resources/views/livewire/project/service/edit-compose.blade.php
+++ b/resources/views/livewire/project/service/edit-compose.blade.php
@@ -1,19 +1,29 @@
-<style>
-    .compose-editor-container .coolify-monaco-editor>div>div>div {
-        height: 512px !important;
-        min-height: 512px !important;
+<div x-data="{
+    raw: true,
+    showNormalTextarea: false,
+    editorHeight: 400,
+    calculateEditorHeight() {
+        // Get viewport height
+        const viewportHeight = window.innerHeight;
+        // Modal max height is calc(100vh - 2rem) = viewport - 32px
+        const modalMaxHeight = viewportHeight - 32;
+        // Account for: modal header (~80px) + info text (~60px) + checkboxes (~80px) + buttons (~80px) + padding (~48px)
+        const fixedElementsHeight = 348;
+        // Calculate available height for editor
+        const availableHeight = modalMaxHeight - fixedElementsHeight;
+        // Set minimum height of 300px and maximum of available space
+        this.editorHeight = Math.max(300, Math.min(availableHeight, viewportHeight - 200));
     }
-</style>
-<div x-data="{ raw: true, showNormalTextarea: false }">
+}" x-init="calculateEditorHeight(); window.addEventListener('resize', () => calculateEditorHeight())">
     <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 class="compose-editor-container" x-bind:style="`--editor-height: ${editorHeight}px`">
         <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 x-bind:style="`height: ${editorHeight}px`" id="dockerComposeRaw">
                 </x-forms.textarea>
             </div>
             <div x-cloak x-show="!showNormalTextarea">
@@ -22,7 +32,7 @@
             </div>
         </div>
         <div x-cloak x-show="raw === false" class="font-mono">
-            <x-forms.textarea rows="25" readonly id="dockerCompose">
+            <x-forms.textarea x-bind:style="`height: ${editorHeight}px`" readonly id="dockerCompose">
             </x-forms.textarea>
         </div>
     </div>
diff --git a/templates/service-templates-latest.json b/templates/service-templates-latest.json
index 1629cc152..859981ac0 100644
--- a/templates/service-templates-latest.json
+++ b/templates/service-templates-latest.json
@@ -4527,7 +4527,7 @@
             "web",
             "admin"
         ],
-        "category": "vps",
+        "category": "vpn",
         "logo": "svgs/wireguard.svg",
         "minversion": "0.0.0",
         "port": "8000"
diff --git a/templates/service-templates.json b/templates/service-templates.json
index 13a6d7382..468bf7543 100644
--- a/templates/service-templates.json
+++ b/templates/service-templates.json
@@ -4527,7 +4527,7 @@
             "web",
             "admin"
         ],
-        "category": "vps",
+        "category": "vpn",
         "logo": "svgs/wireguard.svg",
         "minversion": "0.0.0",
         "port": "8000"