From ae7d85fc88a5d56a74f67d070497e7b094802df8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Tue, 4 Nov 2025 11:39:16 -0300
Subject: [PATCH] Enhance placeholder picker component: Updated the placeholder
 picker to improve usability by adding drag-and-drop functionality for
 placeholder insertion. Adjusted the styling of the placeholder list for
 better visibility and user experience.

---
 .../views/components/placeholder-picker.blade.php  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/placeholder-picker.blade.php b/resources/views/components/placeholder-picker.blade.php
index f25b84a..127ded4 100644
--- a/resources/views/components/placeholder-picker.blade.php
+++ b/resources/views/components/placeholder-picker.blade.php
@@ -73,7 +73,7 @@
         </x-filament::input.wrapper>
         
         <!-- Placeholder List -->
-        <div class="max-h-96 overflow-y-auto space-y-4">
+        <div class="overflow-y-auto overflow-x-hidden space-y-4" style="height: 200px; padding: 10px;overflow-y: auto;">
             <template x-for="(info, type) in filteredCategories" x-bind:key="type">
                 <div class="space-y-2">
                     <h4 class="fi-section-header-heading text-xs font-semibold uppercase tracking-wide">
@@ -88,7 +88,17 @@
                                 x-on:click="window.insertPlaceholder('{{ $fieldName }}', type + '.' + example)"
                                 x-bind:tooltip="'{{ __('placeholder-picker.click_to_insert') }}'"
                             >
-                                <code class="text-xs font-mono" x-text="'{' + type + '.' + example + '}'"></code>
+                                <code 
+                                    class="text-xs font-mono" 
+                                    x-text="'{' + type + '.' + example + '}'"
+                                    draggable="true"
+                                    @dragstart="
+                                        event.dataTransfer.setData(
+                                            'text/plain', 
+                                            '{' + type + '.' + example + '}'
+                                        )
+                                    "
+                                ></code>
                             </x-filament::button>
                         </template>
                     </div>