Feature: Implement Mobile Responsiveness (#2092)

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* format

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* fix conflict

* fix conflict

* chore: run rubocop

* fix test

* update PWA logo

* fix tests

* chore: lint

* fix test

* Refactor: Remove duplicate data attribute in activity partial and add chat form rendering in chats index

---------

Co-authored-by: Josh Pigford <josh@joshpigford.com>

app/views/import/cleans/show.html.erb

@@ -11,25 +11,26 @@
   </div>
 
   <% if @import.cleaned? %>
-    <div class="bg-container border border-tertiary rounded-lg p-3 flex items-center justify-between">
+    <div class="bg-container border border-tertiary rounded-lg p-3 flex flex-col md:flex-row items-start md:items-center justify-between gap-2 md:gap-0">
       <div class="flex items-center gap-2">
         <%= lucide_icon "check-circle", class: "w-4 h-4 text-green-500" %>
-        <p class="text-green-500">Your data has been cleaned</p>
+        <p class="text-green-500 text-sm md:text-base">Your data has been cleaned</p>
       </div>
 
-      <%= link_to "Next step", import_confirm_path(@import), class: "btn btn--primary" %>
+      <%= link_to "Next step", import_confirm_path(@import), class: "btn btn--primary w-full md:w-auto" %>
     </div>
   <% else %>
-    <div class="bg-container border border-tertiary rounded-lg p-3 flex items-center justify-between">
+    <div class="bg-container border border-tertiary rounded-lg p-3 flex flex-col md:flex-row items-start md:items-center justify-between gap-3 md:gap-0">
       <div class="flex items-center gap-2">
-        <%= lucide_icon "alert-triangle", class: "w-4 h-4 text-red-500" %>
-        <p class="text-red-500 text-sm"><%= t(".errors_notice") %></p>
+        <%= lucide_icon "alert-triangle", class: "w-4 h-4 text-red-500 flex-shrink-0" %>
+        <p class="text-red-500 text-sm hidden md:block"><%= t(".errors_notice") %></p>
+        <p class="text-red-500 text-sm md:hidden"><%= t(".errors_notice_mobile") %></p>
       </div>
 
-      <div class="flex justify-center">
-        <div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
-          <%= link_to "All rows", import_clean_path(@import, per_page: params[:per_page], view: "all"), class: "p-2 rounded-lg #{params[:view] != 'errors' ? 'bg-container' : ''}" %>
-          <%= link_to "Error rows", import_clean_path(@import, per_page: params[:per_page], view: "errors"), class: "p-2 rounded-lg #{params[:view] == 'errors' ? 'bg-container' : ''}" %>
+      <div class="flex justify-center w-full md:w-auto">
+        <div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium w-full md:w-auto">
+          <%= link_to "All rows", import_clean_path(@import, per_page: params[:per_page], view: "all"), class: "p-2 rounded-lg flex-1 md:flex-auto text-center #{params[:view] != 'errors' ? 'bg-container' : ''}" %>
+          <%= link_to "Error rows", import_clean_path(@import, per_page: params[:per_page], view: "errors"), class: "p-2 rounded-lg flex-1 md:flex-auto text-center #{params[:view] == 'errors' ? 'bg-container' : ''}" %>
         </div>
       </div>
     </div>
@@ -37,16 +38,18 @@
 
   <div class="pb-12">
     <div class="bg-container-inset rounded-xl p-1 mb-6">
-      <div style="grid-template-columns: repeat(<%= @import.column_keys.count %>, 1fr)" class="grid items-center uppercase text-xs font-medium text-secondary py-3">
-        <% @import.column_keys.each do |key| %>
-          <div class="px-5"><%= import_col_label(key) %></div>
-        <% end %>
-      </div>
+      <div class="overflow-x-auto">
+        <div style="grid-template-columns: repeat(<%= @import.column_keys.count %>, minmax(150px, 1fr)); min-width: max-content;" class="grid items-center uppercase text-xs font-medium text-secondary py-3">
+          <% @import.column_keys.each do |key| %>
+            <div class="px-5"><%= import_col_label(key) %></div>
+          <% end %>
+        </div>
 
-      <div class="bg-container shadow-border-xs rounded-xl divide-y divide-alpha-black-200">
-        <% @rows.each do |row| %>
-          <%= render "import/rows/form", row: row %>
-        <% end %>
+        <div class="bg-container shadow-border-xs rounded-xl divide-y divide-alpha-black-200">
+          <% @rows.each do |row| %>
+            <%= render "import/rows/form", row: row %>
+          <% end %>
+        </div>
       </div>
     </div>
   </div>