From 16c68e5f6d0004623a97fa78402b18691e1e36b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Jan=C3=ADk?= <luky.janik@gmail.com>
Date: Thu, 7 Dec 2023 09:45:30 +0100
Subject: [PATCH] Fix backdrop scrolling and change relative height to fixed

---
 app/components/common/modal_component.html.erb         |  2 +-
 app/components/common/modal_component.rb               |  4 ++--
 app/components/tags_assignment/component.html.erb      | 10 ++++------
 app/components/tags_assignment/diff_component.html.erb |  2 +-
 app/javascript/controllers/turbo_content_controller.js |  5 +++++
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/components/common/modal_component.html.erb b/app/components/common/modal_component.html.erb
index 72cc8b1e5..6dddf87d2 100644
--- a/app/components/common/modal_component.html.erb
+++ b/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" style="<%= @height ? "height: #{@height}" : ""%>">
+        <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 <%= @classes %>">
           <% if header %>
             <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title"><%= header %></h3>
           <% end %>
diff --git a/app/components/common/modal_component.rb b/app/components/common/modal_component.rb
index 65f8043f8..491dbf5c2 100644
--- a/app/components/common/modal_component.rb
+++ b/app/components/common/modal_component.rb
@@ -3,8 +3,8 @@ class ModalComponent < ViewComponent::Base
     renders_one :header
     renders_one :modal_content
 
-    def initialize(height = nil)
-      @height = height
+    def initialize(classes = "")
+      @classes = classes
     end
 
     def remove_content_action
diff --git a/app/components/tags_assignment/component.html.erb b/app/components/tags_assignment/component.html.erb
index 0801e0e60..bb9e28194 100644
--- a/app/components/tags_assignment/component.html.erb
+++ b/app/components/tags_assignment/component.html.erb
@@ -1,18 +1,17 @@
-<%= render Common::ModalComponent.new("550px") do |modal| %>
+<%= render Common::ModalComponent.new("h-[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' }, 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%]">
+                  data: { controller: 'debounce', debounce_target: 'form' }, class: "relative mt-4 flex flex-col grow justify-between" do |form| %>
+      <div class="flex flex-col items-start gap-4">
         <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 overflow-x-hidden overflow-y-auto">
+        <div class="w-full mb-4 overflow-x-hidden overflow-y-auto pr-2.5 max-h-[300px] sm:max-h-[350px]">
           <% @tags_changes.init_assignments.each do |tag_id, value| %>
             <%= hidden_field_tag "tags_assignments[init][#{tag_id}]", value %>
           <% end %>
@@ -26,7 +25,6 @@
           <%= tag.turbo_frame id: TagsAssignment::Component::DIFF_FRAME %>
         </div>
       </div>
-
       <%= tag.turbo_frame id: TagsAssignment::Component::ACTIONS_FRAME do %>
         <%= render Common::ModalActionsComponent.new %>
       <% end %>
diff --git a/app/components/tags_assignment/diff_component.html.erb b/app/components/tags_assignment/diff_component.html.erb
index 314a16e26..b47bfd96d 100644
--- a/app/components/tags_assignment/diff_component.html.erb
+++ b/app/components/tags_assignment/diff_component.html.erb
@@ -1,5 +1,5 @@
 <% if @diff.number_of_changes > 0 %>
-  <div class="text-sm w-full mx-2 mb-4">
+  <div class="text-sm w-full mx-2 my-4">
     <p class="mb-2 italic">Po uložení sa vykonajú nasledovné zmeny:</p>
     <% if @diff.to_add.present? %>
       <p class="mb-2" data-test="to_be_added">Pridajú sa: <%= format_tags(@diff.to_add) %></p>
diff --git a/app/javascript/controllers/turbo_content_controller.js b/app/javascript/controllers/turbo_content_controller.js
index 5528a3006..4a55dc991 100644
--- a/app/javascript/controllers/turbo_content_controller.js
+++ b/app/javascript/controllers/turbo_content_controller.js
@@ -1,7 +1,12 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
+  connect() {
+    document.body.style.overflow = "hidden"
+  }
+
   remove() {
+    document.body.style.overflow = ""
     this.element.parentElement.removeAttribute("src")
     this.element.parentElement.removeAttribute("complete")
     this.element.remove()