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/settings/securities/show.html.erb

@@ -2,7 +2,7 @@
 
 <%= settings_section title: t(".mfa_title"), subtitle: t(".mfa_description") do %>
   <div class="space-y-4">
-    <div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
+    <div class="p-3 shadow-border-xs bg-container rounded-lg md:flex md:justify-between md:items-center">
       <div class="flex items-center gap-3">
         <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
           <%= lucide_icon "shield-check", class: "w-5 h-5 text-secondary" %>
@@ -19,20 +19,22 @@
         </div>
       </div>
 
-      <% if Current.user.otp_required? %>
-        <%= button_to t(".disable_mfa"), disable_mfa_path,
-            method: :delete,
-            class: "btn btn--secondary flex items-center gap-1",
-            data: { turbo_confirm: {
-              title: t(".disable_mfa_confirm"),
-              body: t(".disable_mfa_confirm"),
-              accept: t(".disable_mfa"),
-              acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
-            } } %>
-      <% else %>
-        <%= link_to t(".enable_mfa"), new_mfa_path,
-            class: "btn btn--primary flex items-center gap-1" %>
-      <% end %>
+      <div class="mt-4 md:mt-0">
+        <% if Current.user.otp_required? %>
+          <%= button_to t(".disable_mfa"), disable_mfa_path,
+              method: :delete,
+              class: "w-full md:w-auto btn btn--secondary flex items-center gap-1 justify-center",
+              data: { turbo_confirm: {
+                title: t(".disable_mfa_confirm"),
+                body: t(".disable_mfa_confirm"),
+                accept: t(".disable_mfa"),
+                acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
+              } } %>
+        <% else %>
+          <%= link_to t(".enable_mfa"), new_mfa_path,
+              class: "w-full md:w-auto btn btn--primary flex items-center gap-1 justify-center" %>
+        <% end %>
+      </div>
     </div>
   </div>
 <% end %>