full width search input on mobile devices

app/javascript/elements/search_input.js

@@ -2,15 +2,14 @@ export default class extends HTMLElement {
   connectedCallback () {
     this.input.addEventListener('focus', () => {
       if (this.title) {
-        this.title.classList.add('hidden', 'md:block')
-        this.input.classList.add('w-60')
+        this.titleContainer.classList.add('max-md:hidden')
       }
     })
 
     this.input.addEventListener('blur', (e) => {
       if (this.title && !e.target.value) {
         this.title.classList.remove('hidden')
-        this.input.classList.remove('w-60')
+        this.titleContainer.classList.remove('max-md:hidden')
       }
     })
 
@@ -21,6 +20,20 @@ export default class extends HTMLElement {
         this.input.focus()
       }
     })
+
+    document.addEventListener('turbo:before-cache', this.onBeforeCache)
+  }
+
+  disconnectedCallback () {
+    document.removeEventListener('turbo:before-cache', this.onBeforeCache)
+  }
+
+  onBeforeCache = () => {
+    this.input.value = this.input.getAttribute('value') || ''
+
+    if (this.title) {
+      this.titleContainer.classList.remove('max-md:hidden')
+    }
   }
 
   get input () {
@@ -31,6 +44,16 @@ export default class extends HTMLElement {
     return document.querySelector(this.dataset.title)
   }
 
+  get titleContainer () {
+    const parent = this.title.parentElement
+
+    if (parent && !parent.contains(this)) {
+      return parent
+    }
+
+    return this.title
+  }
+
   get button () {
     return this.querySelector('button')
   }

app/views/shared/_search_input.html.erb

@@ -1,4 +1,4 @@
-<form action="<%= url_for %>" method="get" class="items-center flex">
+<form action="<%= url_for %>" method="get" class="items-center flex max-md:focus-within:flex-1 <%= 'max-md:flex-1' if params[:q].present? %>">
   <% Submissions::Filter::ALLOWED_PARAMS.each do |key| %>
     <% if params[key].present? %>
       <input name="<%= key %>" value="<%= params[key] %>" class="hidden">
@@ -14,8 +14,8 @@
       </a>
     </div>
   <% end %>
-  <search-input data-title="<%= local_assigns[:title_selector] || 'h1' %>" class="flex items-center">
-    <input id="search" name="q" value="<%= params[:q] %>" class="input text-lg pr-10 -mr-12 w-0 md:w-60 <%= 'pl-8 input-outlined w-60' if params[:q].present? %>" placeholder="<%= local_assigns[:placeholder] %>">
+  <search-input data-title="<%= local_assigns[:title_selector] || 'h1' %>" class="group flex items-center max-md:focus-within:flex-1 <%= 'max-md:flex-1' if params[:q].present? %>">
+    <input id="search" name="q" value="<%= params[:q] %>" enterkeyhint="search" class="input text-lg pr-10 -mr-12 w-0 md:w-60 max-md:group-focus-within:w-full <%= 'pl-8 input-outlined max-md:w-full' if params[:q].present? %>" placeholder="<%= local_assigns[:placeholder] %>">
     <button type="submit" title="<%= t('search') %>" class="btn btn-ghost btn-circle">
       <span class="enabled">
         <%= svg_icon('search', class: 'w-6 h-6 stroke-2') %>

app/views/submissions_archived/index.html.erb

@@ -1,6 +1,6 @@
 <% filter_params = params.permit(Submissions::Filter::ALLOWED_PARAMS).compact_blank %>
 <div>
-  <%= link_to root_path, class: 'flex items-center' do %>
+  <%= link_to root_path, class: 'flex items-center mb-1 md:mb-0' do %>
     <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
     <span style="margin-left: 3px"><%= t('back_to_active') %></span>
   <% end %>
@@ -10,7 +10,7 @@
     <div>
       <h1 class="text-2xl md:text-3xl font-bold md:block <%= 'hidden' if params[:q].present? %>"><%= t('submissions') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h1>
     </div>
-    <div>
+    <div class="max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
       <% if params[:q].present? || @pagy.pages > 1 || filter_params.present? %>
         <%= render 'shared/search_input', placeholder: "#{t('search')}..." %>
       <% end %>

app/views/submissions_dashboard/index.html.erb

@@ -2,7 +2,7 @@
 <% is_show_tabs = (@pagy.count.nil? || @pagy.count >= 5) || params[:status].present? || filter_params.present? %>
 <% if Docuseal.demo? %><%= render 'shared/demo_alert' %><% end %>
 <div class="flex justify-between items-center w-full mb-4">
-  <div class="flex items-center flex-grow min-w-0">
+  <div class="flex items-center flex-grow min-w-0 <%= 'max-md:hidden' if params[:q].present? %>">
     <div class="mr-2">
       <%= render 'dashboard/toggle_view', selected: 'submissions' %>
     </div>
@@ -10,7 +10,7 @@
       <%= t('submissions') %>
     </h1>
   </div>
-  <div class="flex space-x-2">
+  <div class="flex space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
     <% if params[:q].present? || @pagy.pages > 1 || filter_params.present? %>
       <%= render 'shared/search_input' %>
     <% end %>

app/views/submissions_filters/_applied_filters.html.erb

@@ -1,40 +1,40 @@
 <% query_params = params.permit(:q).merge(filter_params) %>
 <% if icon = { 'declined' => 'x_circle', 'expired' => 'clock_cancel', 'partially_completed' => 'clock_edit', 'sent' => 'send', 'opened' => 'mail_opened' }[params[:status]] %>
-  <div class="flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-34 border-neutral-700">
-    <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 w-full pr-1 md:max-w-[140px]' do %>
+  <div class="flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700">
+    <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon(icon, class: 'w-5 h-5 shrink-0') %>
       <span class="font-normal truncate"><%= t(params[:status]) %></span>
     <% end %>
-    <%= link_to url_for(params: request.query_parameters.except('status')), class: 'rounded-lg ml-1 hover:bg-base-content hover:text-white' do %>
+    <%= link_to url_for(params: request.query_parameters.except('status')), class: 'rounded-lg ml-1 shrink-0 hover:bg-base-content hover:text-white' do %>
       <%= svg_icon('x', class: 'w-5 h-5') %>
     <% end %>
   </div>
 <% end %>
 <% if params[:folder].present? %>
-  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-34 border-neutral-700" data-tip="<%= t('folder') %>">
-    <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 w-full pr-1 md:max-w-[140px]' do %>
+  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('folder') %>">
+    <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon('folder', class: 'w-5 h-5 shrink-0') %>
       <span class="font-normal truncate"><%= params[:folder] %></span>
     <% end %>
-    <%= link_to url_for(params: request.query_parameters.except('folder')), class: 'rounded-lg ml-1 hover:bg-base-content hover:text-white' do %>
+    <%= link_to url_for(params: request.query_parameters.except('folder')), class: 'rounded-lg ml-1 shrink-0 hover:bg-base-content hover:text-white' do %>
       <%= svg_icon('x', class: 'w-5 h-5') %>
     <% end %>
   </div>
 <% end %>
 <% if params[:author].present? %>
-  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-34 border-neutral-700" data-tip="<%= t('author') %>">
-    <%= link_to submissions_filter_path('author', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 w-full pr-1 md:max-w-[140px]' do %>
+  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('author') %>">
+    <%= link_to submissions_filter_path('author', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon('user', class: 'w-5 h-5 shrink-0') %>
       <span class="font-normal truncate"><%= current_account.users.accessible_by(current_ability).where(account: current_account).find_by(email: params[:author])&.full_name || 'NA' %></span>
     <% end %>
-    <%= link_to url_for(params: request.query_parameters.except('author')), class: 'rounded-lg ml-1 hover:bg-base-content hover:text-white' do %>
+    <%= link_to url_for(params: request.query_parameters.except('author')), class: 'rounded-lg ml-1 shrink-0 hover:bg-base-content hover:text-white' do %>
       <%= svg_icon('x', class: 'w-5 h-5') %>
     <% end %>
   </div>
 <% end %>
 <% if query_params[:completed_at_from].present? || query_params[:completed_at_to].present? %>
-  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-34 border-neutral-700" data-tip="<%= t('completed_at') %>">
-    <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 w-full pr-1 md:max-w-[140px]' do %>
+  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('completed_at') %>">
+    <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon('calendar_check', class: 'w-5 h-5 shrink-0') %>
       <span class="flex flex-row md:flex-col font-normal text-left md:text-center md:text-xs">
         <% if query_params[:completed_at_from] == query_params[:completed_at_to] %>
@@ -46,14 +46,14 @@
         <% end %>
       </span>
     <% end %>
-    <%= link_to url_for(params: request.query_parameters.except('completed_at_from', 'completed_at_to')), class: 'rounded-lg ml-1 hover:bg-base-content hover:text-white' do %>
+    <%= link_to url_for(params: request.query_parameters.except('completed_at_from', 'completed_at_to')), class: 'rounded-lg ml-1 shrink-0 hover:bg-base-content hover:text-white' do %>
       <%= svg_icon('x', class: 'w-5 h-5') %>
     <% end %>
   </div>
 <% end %>
 <% if query_params[:created_at_from].present? || query_params[:created_at_to].present? %>
-  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-34 border-neutral-700" data-tip="<%= t('created_at') %>">
-    <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 w-full pr-1 md:max-w-[140px]' do %>
+  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('created_at') %>">
+    <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon('calendar', class: 'w-5 h-5 shrink-0') %>
       <span class="flex flex-row md:flex-col font-normal text-left md:text-center md:text-xs">
         <% if query_params[:created_at_from] == query_params[:created_at_to] %>
@@ -65,7 +65,7 @@
         <% end %>
       </span>
     <% end %>
-    <%= link_to url_for(params: request.query_parameters.except('created_at_to', 'created_at_from')), class: 'rounded-lg ml-1 hover:bg-base-content hover:text-white' do %>
+    <%= link_to url_for(params: request.query_parameters.except('created_at_to', 'created_at_from')), class: 'rounded-lg ml-1 shrink-0 hover:bg-base-content hover:text-white' do %>
       <%= svg_icon('x', class: 'w-5 h-5') %>
     <% end %>
   </div>

app/views/template_folders/show.html.erb

@@ -29,7 +29,7 @@
         </span>
       <% end %>
     </h1>
-    <div class="flex space-x-2">
+    <div class="flex space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
       <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
         <%= render 'shared/search_input' %>
       <% end %>

app/views/templates/show.html.erb

@@ -9,7 +9,7 @@
           <%= t('submissions') %>
         </h2>
       </div>
-      <div class="flex justify-end space-x-2">
+      <div class="flex justify-end space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
         <% if params[:q].present? || params[:status].present? || filter_params.present? || @pagy.pages > 1 %>
           <%= render 'shared/search_input', title_selector: 'h2' %>
         <% end %>

app/views/templates_archived/index.html.erb

@@ -1,5 +1,5 @@
 <div>
-  <%= link_to root_path, class: 'flex items-center' do %>
+  <%= link_to root_path, class: 'flex items-center mb-1 md:mb-0' do %>
     <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
     <span style="margin-left: 3px"><%= t('back_to_active') %></span>
   <% end %>

app/views/templates_archived_submissions/index.html.erb

@@ -1,33 +1,33 @@
 <% filter_params = params.permit(Submissions::Filter::ALLOWED_PARAMS).compact_blank %>
 <% with_filters = @pagy.pages > 1 || params[:q].present? || filter_params.present? %>
 <%= render 'templates/title', template: @template %>
-<div class="flex flex-col md:flex-row md:items-center mb-6 gap-3">
-  <div class="flex w-full justify-between md:items-end items-end">
+<div>
+  <%= link_to template_path(@template), class: 'flex items-center mb-1 md:mb-0' do %>
+    <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
+    <span style="margin-left: 3px"><%= t('back_to_active') %></span>
+  <% end %>
+</div>
+<div class="flex flex-col md:flex-row md:items-center mb-4 gap-3">
+  <div class="flex w-full md:flex-1 min-w-0 justify-between items-center">
     <div>
-      <div>
-        <%= link_to template_path(@template), class: 'flex items-center' do %>
-          <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
-          <span style="margin-left: 3px"><%= t('back_to_active') %></span>
-        <% end %>
-      </div>
-      <h1 class="text-3xl font-bold md:block"><%= t('submissions') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h1>
+      <h2 class="text-2xl md:text-3xl font-bold md:block"><%= t('submissions') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h2>
     </div>
-    <div class="flex space-x-2 justify-end">
+    <div class="max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
       <% if with_filters %>
-        <%= render 'shared/search_input' %>
+        <%= render 'shared/search_input', title_selector: 'h2' %>
       <% end %>
-      <%= link_to new_template_submissions_export_path(@template, archived: true), class: 'btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
+    </div>
+  </div>
+  <div class="flex flex-wrap justify-end items-center gap-2">
+    <%= render 'submissions_filters/applied_filters', filter_params: %>
+    <div class="shrink-0 md:order-first">
+      <%= link_to new_template_submissions_export_path(@template, archived: true), class: 'btn btn-ghost text-base h-10 min-h-10', data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
         <span><%= t('export') %></span>
       <% end %>
     </div>
+    <%= render 'submissions_filters/filter_button', filter_params: %>
   </div>
-  <% if with_filters %>
-    <div class="flex flex-col items-end md:flex-row gap-2">
-      <%= render 'submissions_filters/applied_filters', filter_params: %>
-      <%= render 'submissions_filters/filter_button', filter_params: %>
-    </div>
-  <% end %>
 </div>
 <% if @pagy.count.nil? || @pagy.count > 0 %>
   <div class="space-y-4">

app/views/templates_dashboard/index.html.erb

@@ -12,7 +12,7 @@
       <%= render 'templates/dashboard_dropzone', style: 'height: 114px' %>
     <% end %>
     <%= render 'templates/dashboard_folder_dropzone', style: 'height: 114px' %>
-    <div class="flex items-center flex-grow min-w-0">
+    <div class="flex items-center flex-grow min-w-0 <%= 'max-md:hidden' if params[:q].present? %>">
       <% if has_archived || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
         <div class="mr-2">
           <%= render 'dashboard/toggle_view', selected: 'templates' %>
@@ -22,7 +22,7 @@
         <%= t('document_templates_html') %>
       </h1>
     </div>
-    <div class="flex space-x-2">
+    <div class="flex space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
       <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 1 || @template_folders.present? %>
         <%= render 'shared/search_input' %>
       <% end %>

app/views/templates_shared/index.html.erb

@@ -1,5 +1,5 @@
 <div>
-  <%= link_to(@is_archived ? templates_shared_index_path : root_path, class: 'flex items-center') do %>
+  <%= link_to(@is_archived ? templates_shared_index_path : root_path, class: 'flex items-center mb-1 md:mb-0') do %>
     <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
     <span style="margin-left: 3px"><%= @is_archived ? t('back_to_active') : t('home') %></span>
   <% end %>
@@ -12,7 +12,7 @@
       <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span>
     <% end %>
   </h1>
-  <div class="flex space-x-2">
+  <div class="flex space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
     <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 1 %>
       <%= render 'shared/search_input' %>
     <% end %>