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/shared/_drawer.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (content:, reload_on_close: false) %>
 
 <%= turbo_frame_tag "drawer" do %>
-  <dialog class="ml-auto bg-container shadow-border-xs rounded-2xl max-w-[480px] h-full w-full mt-4 mr-4 focus-visible:outline-hidden"
+  <dialog class="ml-auto bg-container md:shadow-border-xs md:rounded-2xl  max-w-screen max-h-screen md:max-w-[480px] h-full w-full md:mt-4 md:mr-4 pt-safe focus-visible:outline-hidden"
     data-controller="modal"
     data-action="mousedown->modal#clickOutside"
     data-modal-reload-on-close-value="<%= reload_on_close %>">

app/views/shared/_icon_custom.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (key:, size: "md", color: "current") %>
+
+<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
+<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
+
+<%= inline_svg_tag "#{key}.svg", class: class_names(size_class, color_class, "shrink-0") %>

app/views/shared/_icon_image.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (key:, size: "md", color: "current") %>
+
+<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
+<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
+
+<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key )%>

app/views/shared/_modal.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (content:, classes:) -%>
 <%= turbo_frame_tag "modal" do %>
-  <dialog class="m-auto bg-container shadow-border-xs rounded-2xl max-w-[580px] w-min-content h-fit overflow-visible <%= classes %>" data-controller="modal" data-action="mousedown->modal#clickOutside">
-    <div class="flex flex-col">
+  <dialog class="md:m-auto bg-container shadow-border-xs rounded-none md:rounded-2xl max-w-screen max-h-screen md:max-w-max w-full h-full md:h-fit md:w-auto overflow-visible <%= classes %>" data-controller="modal" data-action="mousedown->modal#clickOutside">
+    <div class="flex flex-col h-full md:h-auto mt-safe">
       <%= content %>
     </div>
   </dialog>

app/views/shared/_modal_form.html.erb

@@ -1,11 +1,11 @@
 <%# locals: (title:, content:, subtitle: nil) %>
 
 <%= modal do %>
-  <article class="mx-auto w-full p-4 space-y-4 min-w-[450px]">
+  <article class="mx-auto w-full p-4 space-y-4 md:min-w-[450px]">
     <div class="space-y-2">
       <header class="flex justify-between items-center">
         <h2 class="font-medium"><%= title %></h2>
-        <%= lucide_icon("x", class: "cursor-pointer w-5 h-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
+        <%= lucide_icon("x", class: "cursor-pointer w-6 h-6 md:w-5 md:w-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
       </header>
 
       <% if subtitle.present? %>

app/views/shared/_notification.html.erb

@@ -3,7 +3,7 @@
 <% type = type.to_sym %>
 <% action = "animationend->element-removal#remove" if type == :notice %>
 
-<%= tag.div class: "flex gap-3 rounded-lg border bg-container p-4 group max-w-80 shadow-xs border-alpha-black-25",
+<%= tag.div class: "flex gap-3 rounded-lg border bg-container p-4 group max-w-80 shadow-xs border-alpha-black-25 mx-auto md:mx-0",
             data: {
               controller: "element-removal",
               action: action