Change tag selector to modal

app/components/common/tag_selector_component.html.erb

@@ -1,35 +1,35 @@
-<div class="relative" data-controller="dropdown"
-                data-dropdown-active-target="#dropdown-button"
-                data-dropdown-active-class="bg-gray-50"
-                data-dropdown-invisible-class="opacity-0 scale-95"
-                data-dropdown-visible-class="opacity-100 scale-100"
-                data-dropdown-entering-class="ease-out duration-100"
-                data-dropdown-enter-timeout="100"
-                data-dropdown-leaving-class="ease-in duration-75"
-                data-dropdown-leave-timeout="75">
-  <div id="dropdown-button" data-action="click->dropdown#toggle click@window->dropdown#hide" role="button" data-dropdown-target="button" tabindex="0" class="inline-block select-none">
-    <button type="button" class="flex items-center" aria-expanded="false" aria-haspopup="true">
-      <div class="flex justify-center items-center    relative  gap-1.5 px-2 py-2 rounded-md bg-blue-100">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="  w-4 h-4 relative" preserveAspectRatio="xMidYMid meet">
-          <path d="M8 4V8M8 8V12M8 8H12M8 8H4" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-        </svg>
-      </div>
-    </button>
-  </div>
-  <div data-dropdown-target="menu" class="z-50 absolute transform transition hidden opacity-0 scale-95">
-    <div class="flex flex-col z-50 w-[600px] shrink-0 justify-start items-stretch absolute self-stretch gap-2 p-2 rounded-lg bg-white border border-gray-300 right-0" style="box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);">
-      <%= form_with url: search_available_tags_message_thread_path(@message_thread), method: :get,
-                    data: { turbo_stream: true, controller: 'debounce', debounce_target: 'form' },
-                    class: "flex items-center rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600" do |form| %>
-        <div class="p-2">
-          <%= render Icons::SearchComponent.new %>
+<div class="relative" data-controller="modal" data-action="keydown@window->modal#closeWithKeyboard">
+  <button type="button" class="rounded-md bg-blue-100 p-2" data-action="click->modal#open">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="  w-4 h-4 relative" preserveAspectRatio="xMidYMid meet">
+      <path d="M8 4V8M8 8V12M8 8H12M8 8H4" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+  </button>
+  <div role="dialog" aria-modal="true" aria-labelledby="modal-title" data-target="modal.container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
+    <div class="max-w-lg max-h-screen w-full relative">
+      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 flex flex-col gap-4">
+          <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Pridať tag</h3>
+          <div class="sm:flex sm:flex-col sm:items-start gap-4">
+            <%= form_with url: search_available_tags_message_thread_path(@message_thread), method: :get,
+                          data: { turbo_stream: true, controller: 'debounce', debounce_target: 'form' },
+                          class: "flex items-center rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 w-full" do |form| %>
+              <div class="p-2">
+                <%= render Icons::SearchComponent.new %>
+              </div>
+              <%= form.search_field :name_search, value: "", placeholder: "Vyhľadaj štítok",
+                                    data: { action: 'input->debounce#debounce' },
+                                    onreset: "this.form.requestSubmit()",
+                                    class: "grow border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" %>
+            <% end %>
+            <div class="w-full">
+              <%= tag.turbo_frame id: "tag-selector-popup", class: "w-100", loading: :lazy, src: search_available_tags_message_thread_path(@message_thread) %>
+            </div>
+          </div>
+          <div class="mt-5 sm:mt-4 sm:flex justify-end">
+            <button data-action="click->modal#close" type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Zrušiť</button>
+          </div>
         </div>
-        <%= form.search_field :name_search, value: "", placeholder: "Vyhľadaj štítok",
-                              data: { action: 'input->debounce#debounce' },
-                              onreset: "this.form.requestSubmit()",
-                              class: "grow border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" %>
-      <% end %>
-      <%= tag.turbo_frame id: "tag-selector-popup", loading: :lazy, src: search_available_tags_message_thread_path(@message_thread) %>
+      </div>
     </div>
   </div>
-</div>
+</div>

app/components/common/tag_selector_popup_component.html.erb

@@ -3,11 +3,11 @@
     <div class="flex flex-wrap justify-start items-center gap-1">
       <% if @tags.any? %>
         <% @tags.each do |tag| %>
-          <div class="flex justify-center items-center gap-1.5 px-2 py-1 rounded-md bg-blue-50 border border-blue-300 hover:cursor-pointer">
+          <div class="flex justify-center items-center gap-1.5 px-2 py-1 rounded-md bg-blue-50 border border-blue-300 hover:cursor-pointer max-w-full">
             <%= form_with model: MessageThreadsTag.new(message_thread: @message_thread, tag: tag), data: { turbo_frame: '_top' }, class: "contents" do |f| %>
               <%= f.hidden_field :message_thread_id %>
               <%= f.hidden_field :tag_id %>
-              <%= f.submit tag.name, class: "text-sm text-left text-blue-600 hover:cursor-pointer" %>
+              <%= f.submit tag.name, class: "truncate text-sm text-left text-blue-600 hover:cursor-pointer max-w-full" %>
             <% end %>
           </div>
         <% end %>