tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-04-19 13:20:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add dynamic viewport-based height for compose editor

Browse Source 
- 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
This commit is contained in:
Andras Bacsai
2025-10-27 11:18:25 +01:00
parent 8458ad0283
commit 12766695c4
5 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/components/forms/monaco-editor.blade.php
View File

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