adjust drawer

app/javascript/elements/autoresize_textarea.js

@@ -7,7 +7,7 @@ export default class extends HTMLElement {
 
   resize () {
     if (this.textarea.clientHeight < this.textarea.scrollHeight) {
-      this.textarea.style.height = `${this.textarea.scrollHeight}px`
+      this.textarea.style.height = `${this.textarea.scrollHeight + 5}px`
     }
   }
 

app/views/shared/_turbo_modal_large.html.erb

@@ -0,0 +1,18 @@
+<turbo-frame id="modal">
+  <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto !justify-normal md:!justify-center" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+    <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+    <div class="bg-base-100 min-h-screen max-h-screen md:min-h-fit md:mt-3 md:rounded-2xl relative w-full relative overflow-y-auto">
+      <% if local_assigns[:title] %>
+        <div class="flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium mt-0.5">
+          <span>
+            <%= local_assigns[:title] %>
+          </span>
+          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+        </div>
+      <% end %>
+      <div class="w-full md:w-[590px] overflow-y-auto" style="max-height: calc(100vh - 14px - 45px)">
+        <%= yield %>
+      </div>
+    </div>
+  </turbo-modal>
+</turbo-frame>

app/views/templates/_title.html.erb

@@ -39,7 +39,7 @@
       <div class="flex items-center space-x-2">
         <% if can?(:update, template) && (Docuseal.multitenant? || current_account.testing? || current_account.id == 1) %>
           <div class="tooltip" data-tip="Preferences">
-            <%= link_to template_preferences_path(template), class: 'btn border border-base-200 bg-base-200 hover:bg-base-300 hover:border-base-300 btn-sm flex-1 hidden md:flex', data: { turbo_frame: :drawer } do %>
+            <%= link_to template_preferences_path(template), class: 'btn border border-base-200 bg-base-200 hover:bg-base-300 hover:border-base-300 btn-sm flex-1 hidden md:flex', data: { turbo_frame: :modal } do %>
               <span class="flex items-center justify-center space-x-2">
                 <%= svg_icon('adjustments_horizontal', class: 'w-6 h-6') %>
               </span>

app/views/templates_preferences/show.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/turbo_drawer', title: 'Preferences', close_after_submit: false do %>
+<%= render 'shared/turbo_modal_large', title: 'Preferences', close_after_submit: false do %>
   <% options = [['General', 'general'], ['API and Embedding', 'api']] %>
   <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-3 block">
     <div class="join">
@@ -12,7 +12,7 @@
       <% end %>
     </div>
   </toggle-visible>
-  <div id="general" class="px-4 mb-4">
+  <div id="general" class="px-5 mb-4">
     <%= form_for @template, url: template_preferences_path(@template), method: :post, html: { autocomplete: 'off', class: 'mt-1' } do |f| %>
       <toggle-on-submit data-element-id="email_saved_alert"></toggle-on-submit>
       <%= f.fields_for :preferences, Struct.new(:request_email_subject, :request_email_body).new(*(@template.preferences.values_at('request_email_subject', 'request_email_body').compact_blank.presence || AccountConfigs.find_or_initialize_for_key(current_account, AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY).value.values_at('subject', 'body'))) do |ff| %>
@@ -62,7 +62,7 @@
     <% end %>
     <%= render 'templates_code_modal/preferences' %>
   </div>
-  <div id="api" class="hidden mt-2 mb-4 px-4">
+  <div id="api" class="hidden mt-2 mb-4 px-5">
     <div>
       <label class="text-sm font-semibold" for="template_id">
         Template ID