From 30481fbc07d765824010d67bf6d0f95bc16b0fa2 Mon Sep 17 00:00:00 2001
From: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>
Date: Tue, 21 Apr 2026 12:43:37 +0200
Subject: [PATCH] fix: create new partial for tabs rendering. Address mobile UI
 issues. (#1534)

---
 app/views/budgets/_budget_tabs.html.erb | 31 +++++++++++++++++++
 app/views/budgets/show.html.erb         | 41 +++++--------------------
 2 files changed, 39 insertions(+), 33 deletions(-)
 create mode 100644 app/views/budgets/_budget_tabs.html.erb

diff --git a/app/views/budgets/_budget_tabs.html.erb b/app/views/budgets/_budget_tabs.html.erb
new file mode 100644
index 000000000..cdb82ba31
--- /dev/null
+++ b/app/views/budgets/_budget_tabs.html.erb
@@ -0,0 +1,31 @@
+<div class="w-full flex justify-center">
+    <div class="max-w-full w-full lg:w-auto overflow-x-auto no-scrollbar">
+        <div class="w-full inline-flex whitespace-nowrap bg-container-inset rounded-lg p-1 text-sm font-medium gap-0.5">
+
+        <button
+            data-action="click->budget-filter#setFilter"
+            data-budget-filter-filter-param="all"
+            data-budget-filter-target="tab"
+            class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 bg-white theme-dark:bg-gray-700 text-primary shadow-sm">
+            <%= t("budgets.show.filter.all") %>
+        </button>
+
+        <button
+            data-action="click->budget-filter#setFilter"
+            data-budget-filter-filter-param="over_budget"
+            data-budget-filter-target="tab"
+            class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
+            <%= t("budgets.show.filter.over_budget") %>
+        </button>
+
+        <button
+            data-action="click->budget-filter#setFilter"
+            data-budget-filter-filter-param="on_track"
+            data-budget-filter-target="tab"
+            class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
+            <%= t("budgets.show.filter.on_track") %>
+        </button>
+
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/views/budgets/show.html.erb b/app/views/budgets/show.html.erb
index f9cec2150..0df039ba5 100644
--- a/app/views/budgets/show.html.erb
+++ b/app/views/budgets/show.html.erb
@@ -51,45 +51,15 @@
     <%= content_tag :div,
       class: "w-full bg-container rounded-xl shadow-border-xs p-4",
       data: (has_over_budget ? { controller: "budget-filter" } : {}) do %>
-      <div class="flex items-center mb-4 flex-nowrap">
+      <div class="flex items-center mb-4 flex-nowrap justify-between">
         <h2 class="text-lg font-medium shrink-0">
           <%= t("budgets.show.categories.title") %>
         </h2>
 
         <% if has_over_budget %>
-        <div class="flex-1 min-w-0 px-1">
-          <div class="w-full flex justify-center">
-            <div class="max-w-full overflow-x-auto no-scrollbar">
-              <div class="inline-flex whitespace-nowrap bg-container-inset rounded-lg p-1 text-sm font-medium gap-0.5">
-
-                <button
-                  data-action="click->budget-filter#setFilter"
-                  data-budget-filter-filter-param="all"
-                  data-budget-filter-target="tab"
-                  class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 bg-white theme-dark:bg-gray-700 text-primary shadow-sm">
-                  <%= t("budgets.show.filter.all") %>
-                </button>
-
-                <button
-                  data-action="click->budget-filter#setFilter"
-                  data-budget-filter-filter-param="over_budget"
-                  data-budget-filter-target="tab"
-                  class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
-                  <%= t("budgets.show.filter.over_budget") %>
-                </button>
-
-                <button
-                  data-action="click->budget-filter#setFilter"
-                  data-budget-filter-filter-param="on_track"
-                  data-budget-filter-target="tab"
-                  class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
-                  <%= t("budgets.show.filter.on_track") %>
-                </button>
-
-              </div>
-            </div>
+          <div class="hidden lg:flex flex-1 min-w-0 px-1">
+            <%= render "budgets/budget_tabs" %>
           </div>
-        </div>
         <% end %>
 
         <div class="<%= has_over_budget ? "shrink-0 flex justify-end whitespace-nowrap" : "ml-auto" %>">
@@ -103,6 +73,11 @@
           <% end %>
         </div>
       </div>
+      <% if has_over_budget %>
+        <div class="flex lg:hidden flex-1 min-w-0 mb-4">
+          <%= render "budgets/budget_tabs" %>
+        </div>
+      <% end %>
 
       <%= render "budgets/budget_categories", budget: @budget %>
     <% end %>