Initial scrolling changes

app/components/common/modal_component.html.erb

@@ -2,7 +2,7 @@
   <div role="dialog" aria-modal="true" aria-labelledby="modal-title" class="animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 10000;">
     <div class="max-w-lg max-h-screen w-full relative" style="z-index: 1000">
       <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 w-full sm:max-w-lg sm:p-6 sm:pb-4 flex flex-col">
+        <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 w-full sm:max-w-lg sm:p-6 sm:pb-4 flex flex-col" style="<%= @height ? "height: #{@height}" : ""%>">
           <% if header %>
             <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title"><%= header %></h3>
           <% end %>

app/components/common/modal_component.rb

@@ -3,6 +3,10 @@ class ModalComponent < ViewComponent::Base
     renders_one :header
     renders_one :modal_content
 
+    def initialize(height = nil)
+      @height = height
+    end
+
     def remove_content_action
       "turbo-content#remove"
     end

app/components/tags_assignment/component.html.erb

@@ -1,18 +1,18 @@
-<%= render Common::ModalComponent.new do |modal| %>
+<%= render Common::ModalComponent.new("550px") do |modal| %>
   <% modal.with_header do %>
     Úprava štítkov
   <% end %>
   <% modal.with_modal_content do %>
     <%= form_with url: prepare_message_thread_tags_path(@message_thread),
-                  data: { controller: 'debounce', debounce_target: 'form' } do |form| %>
-      <div class="flex flex-col items-start gap-4 mt-4">
+                  data: { controller: 'debounce', debounce_target: 'form' }, class: "mt-4 flex flex-col grow justify-between overflow-hidden" do |form| %>
+      <div class="flex flex-col items-start gap-4 max-height-[85%]">
         <div class="w-full">
           <%= tag.turbo_frame id: TagsAssignment::Component::SEARCH_FIELD_FRAME do %>
             <%= render TagsAssignment::SearchFieldComponent.new %>
           <% end %>
         </div>
 
-        <div class="w-full mb-4">
+        <div class="w-full mb-4 overflow-x-hidden overflow-y-auto">
           <% @tags_changes.init_assignments.each do |tag_id, value| %>
             <%= hidden_field_tag "tags_assignments[init][#{tag_id}]", value %>
           <% end %>
@@ -23,11 +23,10 @@
                 tags_assignments: @tags_changes.tags_assignments,
                 create_tag_path: create_tag_message_thread_tags_path(@message_thread)) %>
           <% end %>
+          <%= tag.turbo_frame id: TagsAssignment::Component::DIFF_FRAME %>
         </div>
       </div>
 
-      <%= tag.turbo_frame id: TagsAssignment::Component::DIFF_FRAME %>
-
       <%= tag.turbo_frame id: TagsAssignment::Component::ACTIONS_FRAME do %>
         <%= render Common::ModalActionsComponent.new %>
       <% end %>

app/components/tags_assignment/list_component.html.erb

@@ -1,9 +1,9 @@
-<div class="flex flex-col gap-2 overflow-y-scroll border rounded border-gray-200 p-1" style="max-height: 40vh">
+<div class="flex flex-col gap-2 border-b border-gray-200 p-1 pb-4">
   <div>
     <%= submit_tag "1", name: "assignments_update", id: "assignments_update", class: "hidden" %>
     <% @tags_filter.all_tags.each do |tag| %>
-      <div class="flex <%= "hidden" if @tags_filter.filtered_ids.exclude?(tag.id) %>">
-        <div class="mr-3 ml-1 flex h-6 items-center">
+      <div class="flex ml-1 gap-3 <%= "hidden" if @tags_filter.filtered_ids.exclude?(tag.id) %>">
+        <div class="flex h-6 items-center">
           <%= hidden_field_tag "tags_assignments[new][#{tag.id}]", TagsChanges::REMOVE_SIGN, id: nil %>
 
           <% checkbox = TagsChanges::Checkbox.new(tag_assignments: @tags_assignments, tag_id: tag.id.to_s) %>
@@ -29,9 +29,9 @@
           <%= check_box_tag "new_tag", @tags_filter.filter_query, false, class: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600 cursor-pointer", onchange: "this.form.requestSubmit(document.getElementById('create_tag')); this.disabled = true;" %>
         </div>
         <div class="min-w-0 flex text-sm leading-6">
-          <%= label_tag "new_tag", class: "select-none text-gray-900 cursor-pointer" do %>
+          <%= label_tag "new_tag", class: "flex gap-2 select-none text-gray-900 cursor-pointer" do %>
             <%= @tags_filter.filter_query %>
-            <span class="rounded-full px-2 py-0.5 ml-2 bg-gray-400 text-white">zaškrtnutím vytvoríte nový štítok</span>
+            <span class="text-gray-500">(nový štítok)</span>
           <% end %>
           <%= submit_tag "create_tag", id: "create_tag", formaction: @create_tag_path, formmethod: :post, class: "hidden" %>
         </div>