From b28450841ea0262a35ead1ebaf17079df2866f39 Mon Sep 17 00:00:00 2001
From: Dylan Corrales <DeathCamel58@gmail.com>
Date: Sat, 8 Nov 2025 13:23:54 -0500
Subject: [PATCH] PWA: Transaction UI Fixes (#283)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* PWA: Fix header display on screens smaller than tailwind md

Also makes the header not render if there aren't any transactions.
Mobile already did this, desktop didn't. Now it's consistent.

Fix #181

* PWA: Display category on `md`

* ERB: Align transaction amount column

---------

Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
---
 app/views/transactions/_transaction.html.erb |  4 +--
 app/views/transactions/index.html.erb        | 27 ++++++++------------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb
index bf0e3331c..9b87c7aff 100644
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@@ -89,11 +89,11 @@
         </div>
       </div>
 
-      <div class="hidden lg:flex items-center gap-1 col-span-2">
+      <div class="hidden md:flex items-center gap-1 col-span-2">
         <%= render "transactions/transaction_category", transaction: transaction %>
       </div>
 
-      <div class="col-span-2 ml-auto text-right">
+      <div class="col-span-2 col-start-11 md:col-start-auto ml-auto text-right">
         <%= content_tag :p,
             transaction.transfer? && view_ctx == "global" ? "+/- #{format_money(entry.amount_money.abs)}" : format_money(-entry.amount_money),
             class: ["text-green-600": entry.amount.negative?] %>
diff --git a/app/views/transactions/index.html.erb b/app/views/transactions/index.html.erb
index 6f8a0a486..47eb8ec81 100644
--- a/app/views/transactions/index.html.erb
+++ b/app/views/transactions/index.html.erb
@@ -58,24 +58,17 @@
 
     <% if @pagy.count > 0 || (@projected_recurring.any? && @q.blank?) %>
       <div class="grow overflow-y-auto">
-        <div class="grid-cols-12 bg-container-inset rounded-xl px-5 py-3 text-xs uppercase font-medium text-secondary items-center mb-4 hidden md:grid">
-          <div class="pl-0.5 col-span-8 flex items-center gap-4">
-            <%= check_box_tag "selection_entry",
-                              class: "checkbox checkbox--light",
-                              data: { action: "bulk-select#togglePageSelection" } %>
-            <p>transaction</p>
-          </div>
-
-          <p class="col-span-2">category</p>
-          <p class="col-span-2 justify-self-end">amount</p>
-        </div>
-
         <% if @transactions.any? %>
-          <div class="md:hidden text-xs uppercase font-medium text-secondary mb-2 px-2">
-            <%= check_box_tag "selection_entry",
-                              class: "checkbox checkbox--light mr-2 ml-1",
-                              data: { action: "bulk-select#togglePageSelection" } %>
-            <span>TRANSACTION</span>
+          <div class="grid-cols-12 bg-container-inset rounded-xl px-5 py-3 text-xs uppercase font-medium text-secondary items-center mb-4 grid">
+            <div class="pl-0.5 col-span-8 flex items-center gap-4">
+              <%= check_box_tag "selection_entry",
+                                class: "checkbox checkbox--light",
+                                data: { action: "bulk-select#togglePageSelection" } %>
+              <p>transaction</p>
+            </div>
+
+            <p class="col-span-2 md:block hidden">category</p>
+            <p class="col-span-2 col-start-11 md:col-start-auto justify-self-end md:block">amount</p>
           </div>
         <% end %>