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/budgets/_budget_header.html.erb

@@ -21,7 +21,7 @@
 
   <div data-controller="menu" data-menu-placement-value="bottom-start">
     <%= tag.button data: { menu_target: "button" }, class: "flex items-center gap-1 hover:bg-alpha-black-25 cursor-pointer rounded-md p-2" do %>
-      <span class="text-primary font-medium"><%= @budget.name %></span>
+      <span class="text-primary font-medium text-3xl md:text-base"><%= @budget.name %></span>
       <%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-secondary" %>
     <% end %>
 

app/views/budgets/show.html.erb

@@ -5,8 +5,8 @@
             next_budget: @next_budget,
             latest_budget: @latest_budget %>
 
-  <div class="flex items-start gap-4">
-    <div class="w-[300px] space-y-4">
+  <div class="flex flex-col items-start gap-4 md:flex-row">
+    <div class="w-full md:w-[300px] space-y-4">
       <div class="h-[300px] bg-container rounded-xl shadow-border-xs p-8">
         <% if @budget.available_to_allocate.negative? %>
           <%= render "budgets/over_allocation_warning", budget: @budget %>
@@ -49,7 +49,7 @@
       </div>
     </div>
 
-    <div class="grow bg-container rounded-xl shadow-border-xs p-4">
+    <div class="w-full grow bg-container rounded-xl shadow-border-xs p-4">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-lg font-medium">Categories</h2>