fix: improve cloud-init scripts UI styling and behavior

Fix multiple UI/UX issues with cloud-init scripts management:

1. Fix card styling - Remove purple box background, use simple border
   - Changed from .box class to inline flex/border styling
   - Matches cloud provider tokens styling pattern

2. Remove script preview section
   - Preview was taking too much space and looked cluttered
   - Users can edit to see full script content

3. Make edit modal full width
   - Added fullWidth attribute to x-modal-input component
   - Provides better editing experience for long scripts

4. Fix fields clearing after update
   - Fields were being reset even in edit mode
   - Now only reset fields when creating new script
   - Edit mode preserves values after save

🤖 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-11 13:30:44 +02:00
parent 5463f4d496
commit 6c5adce633
2 changed files with 30 additions and 33 deletions

View File

@@ -78,7 +78,11 @@ class CloudInitScriptForm extends Component
$message = 'Cloud-init script created successfully.';
}
$this->reset(['name', 'script', 'scriptId']);
// Only reset fields if creating (not editing)
if (! $this->scriptId) {
$this->reset(['name', 'script']);
}
$this->dispatch('scriptSaved');
$this->dispatch('success', $message);