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/rows/_form.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (row:) %>
 
-<div style="grid-template-columns: repeat(<%= row.import.column_keys.count %>, 1fr)" class="first:rounded-tl-lg first:rounded-tr-lg last:rounded-bl-lg last:rounded-br-lg grid divide-x divide-alpha-black-200 group">
+<div style="grid-template-columns: repeat(<%= row.import.column_keys.count %>, minmax(150px, 1fr)); min-width: max-content;" class="first:rounded-tl-lg first:rounded-tr-lg last:rounded-bl-lg last:rounded-br-lg grid divide-x divide-alpha-black-200 group">
   <% row.import.column_keys.each_with_index do |key, idx| %>
     <%= turbo_frame_tag dom_id(row, key), title: row.valid? ? nil : row.errors.full_messages.join(", ") do %>
       <%= form_with(
@@ -9,18 +9,39 @@
             url: import_row_path(row.import, row),
             method: :patch,
             data: {
-              controller: "auto-submit-form",
-              auto_submit_form_trigger_event_value: "blur"
+              controller: "auto-submit-form mobile-cell-interaction",
+              auto_submit_form_trigger_value: "blur",
+              mobile_cell_interaction_error_value: !cell_is_valid?(row, key) ? row.errors[key].join(", ") : "",
             }
           ) do |form| %>
-        <%= form.text_field key,
-              "data-auto-submit-form-target": "auto",
-              class: [
-                cell_class(row, key),
-                idx == 0 ? "group-first:rounded-tl-lg group-last:rounded-bl-lg" : "",
-                idx == row.import.column_keys.count - 1 ? "group-first:rounded-tr-lg group-last:rounded-br-lg" : "",
-              ],
-              disabled: row.import.complete? %>
+        <div class="relative">
+          <%= form.text_field key,
+                "data-auto-submit-form-target": "auto",
+                "data-action": "focus->mobile-cell-interaction#highlightCell blur->mobile-cell-interaction#unhighlightCell touchstart->mobile-cell-interaction#handleCellTouch",
+                "data-mobile-cell-interaction-target": "field",
+                class: [
+                  cell_class(row, key),
+                  idx == 0 ? "group-first:rounded-tl-lg group-last:rounded-bl-lg" : "",
+                  idx == row.import.column_keys.count - 1 ? "group-first:rounded-tr-lg group-last:rounded-br-lg" : "",
+                  "focus:outline-none focus:z-10 relative",
+                ],
+                disabled: row.import.complete? %>
+                
+          <% if !cell_is_valid?(row, key) %>
+            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-red-500 md:hidden" 
+                  data-action="click->mobile-cell-interaction#toggleErrorMessage"
+                  data-mobile-cell-interaction-target="errorIcon">
+              <%= lucide_icon "alert-circle", class: "w-4 h-4" %>
+            </span>
+            
+            <div class="absolute left-4 right-4 bottom-full mb-2 p-2 bg-red-50 border border-red-200 rounded-lg shadow-lg text-xs text-red-600 hidden md:hidden z-20"
+                 data-mobile-cell-interaction-target="errorTooltip">
+              <%= row.errors[key].join(", ") %>
+            </div>
+          <% end %>
+          
+          <div class="absolute inset-0 bg-primary/5 pointer-events-none opacity-0 transition-opacity duration-150 ease-in-out z-0" data-mobile-cell-interaction-target="highlight"></div>
+        </div>
       <% end %>
     <% end %>
   <% end %>