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

View File

@@ -146,6 +146,7 @@ class MyComponent extends Component
- 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/`)