autoresize textarea

app/javascript/application.js

@@ -13,6 +13,7 @@ import DynamicList from './elements/dynamic_list'
 import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
+import AutoresizeTextarea from './elements/autoresize_textarea'
 
 document.addEventListener('turbo:before-cache', () => {
   window.flash?.remove()
@@ -34,6 +35,7 @@ window.customElements.define('dynamic-list', DynamicList)
 window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
+window.customElements.define('autoresize-textarea', AutoresizeTextarea)
 
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/autoresize_textarea.js

@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.resize()
+
+    this.textarea.addEventListener('input', () => this.resize())
+  }
+
+  resize () {
+    if (this.textarea.clientHeight < this.textarea.scrollHeight) {
+      this.textarea.style.height = `${this.textarea.scrollHeight}px`
+    }
+  }
+
+  get textarea () {
+    return this.querySelector('textarea')
+  }
+}

app/views/storage_settings/_google_cloud_form.html.erb

@@ -13,7 +13,7 @@
     </div>
     <div class="form-control">
       <%= fff.label :credentials, 'Credentials (JSON key content)', class: 'label' %>
-      <%= fff.text_area :credentials, value: configs['credentials'], required: true, class: 'base-textarea' %>
+      <%= fff.text_area :credentials, value: configs['credentials'], required: true, class: 'base-textarea w-full', rows: 4 %>
     </div>
   <% end %>
 <% end %>

app/views/submissions/new.html.erb

@@ -3,7 +3,9 @@
     <% if @template.submitters.size == 1 %>
       <div class="form-control">
         <%= f.label :emails, class: 'label' %>
-        <%= f.text_area :emails, required: true, class: 'base-textarea' %>
+        <autoresize-textarea>
+          <%= f.text_area :emails, required: true, class: 'base-textarea w-full' %>
+        </autoresize-textarea>
       </div>
     <% else %>
       <dynamic-list class="space-y-4">
@@ -59,11 +61,14 @@
       <div class="card-body">
         <div class="form-control space-y-2">
           <span class="label-text">Hi there,</span>
-          <%= f.text_area :message, value: format(SubmitterMailer::DEFAULT_MESSAGE, name: @template.name), required: true, class: 'base-textarea !rounded-lg' %>
+          <autoresize-textarea>
+            <%= f.text_area :message, value: format(SubmitterMailer::DEFAULT_MESSAGE, name: @template.name), required: true, class: 'base-textarea !rounded-lg w-full' %>
+          </autoresize-textarea>
           <span class="label-text">
             Thanks,
             <br>
             <%= current_account.name %>
+          </span>
         </div>
       </div>
     </div>