From 6c5adce633bd5cc53d1975c045f25d246aa4fccb Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sat, 11 Oct 2025 13:30:44 +0200
Subject: [PATCH] fix: improve cloud-init scripts UI styling and behavior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/Livewire/Security/CloudInitScriptForm.php |  6 +-
 .../security/cloud-init-scripts.blade.php     | 57 ++++++++-----------
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/app/Livewire/Security/CloudInitScriptForm.php b/app/Livewire/Security/CloudInitScriptForm.php
index 5307e28b3..ff670cd4f 100644
--- a/app/Livewire/Security/CloudInitScriptForm.php
+++ b/app/Livewire/Security/CloudInitScriptForm.php
@@ -78,7 +78,11 @@ public function save()
                 $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);
 
diff --git a/resources/views/livewire/security/cloud-init-scripts.blade.php b/resources/views/livewire/security/cloud-init-scripts.blade.php
index 910b87b32..aa7324e4b 100644
--- a/resources/views/livewire/security/cloud-init-scripts.blade.php
+++ b/resources/views/livewire/security/cloud-init-scripts.blade.php
@@ -12,42 +12,35 @@
 
     <div class="grid gap-4 lg:grid-cols-2">
         @forelse ($scripts as $script)
-            <div wire:key="script-{{ $script->id }}" class="box group">
-                <div class="flex flex-col gap-2 mx-6">
-                    <div class="flex justify-between items-start">
-                        <div class="flex-1">
-                            <div class="box-title">{{ $script->name }}</div>
-                            <div class="text-xs text-neutral-500 dark:text-neutral-400">
-                                Created {{ $script->created_at->diffForHumans() }}
-                            </div>
+            <div wire:key="script-{{ $script->id }}"
+                class="flex flex-col gap-1 p-2 border dark:border-coolgray-200 hover:no-underline">
+                <div class="flex justify-between items-center">
+                    <div class="flex-1">
+                        <div class="font-bold dark:text-white">{{ $script->name }}</div>
+                        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                            Created {{ $script->created_at->diffForHumans() }}
                         </div>
                     </div>
+                </div>
 
-                    <div class="mt-2">
-                        <div class="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Script Preview:</div>
-                        <pre
-                            class="p-2 text-xs rounded bg-neutral-100 dark:bg-coolgray-100 overflow-x-auto max-h-32 overflow-y-auto">{{ Str::limit($script->script, 200) }}</pre>
-                    </div>
+                <div class="flex gap-2 mt-2">
+                    @can('update', $script)
+                        <x-modal-input buttonTitle="Edit" title="Edit Cloud-Init Script" fullWidth>
+                            <livewire:security.cloud-init-script-form :scriptId="$script->id"
+                                wire:key="edit-{{ $script->id }}" />
+                        </x-modal-input>
+                    @endcan
 
-                    <div class="flex gap-2 mt-2">
-                        @can('update', $script)
-                            <x-modal-input buttonTitle="Edit" title="Edit Cloud-Init Script">
-                                <livewire:security.cloud-init-script-form :scriptId="$script->id"
-                                    wire:key="edit-{{ $script->id }}" />
-                            </x-modal-input>
-                        @endcan
-
-                        @can('delete', $script)
-                            <x-modal-confirmation title="Confirm Script Deletion?" isErrorButton buttonTitle="Delete"
-                                submitAction="deleteScript({{ $script->id }})" :actions="[
-                                    'This cloud-init script will be permanently deleted.',
-                                    'This action cannot be undone.',
-                                ]" confirmationText="{{ $script->name }}"
-                                confirmationLabel="Please confirm the deletion by entering the script name below"
-                                shortConfirmationLabel="Script Name" :confirmWithPassword="false"
-                                step2ButtonText="Delete Script" />
-                        @endcan
-                    </div>
+                    @can('delete', $script)
+                        <x-modal-confirmation title="Confirm Script Deletion?" isErrorButton buttonTitle="Delete"
+                            submitAction="deleteScript({{ $script->id }})" :actions="[
+                                'This cloud-init script will be permanently deleted.',
+                                'This action cannot be undone.',
+                            ]" confirmationText="{{ $script->name }}"
+                            confirmationLabel="Please confirm the deletion by entering the script name below"
+                            shortConfirmationLabel="Script Name" :confirmWithPassword="false"
+                            step2ButtonText="Delete Script" />
+                    @endcan
                 </div>
             </div>
         @empty