From 0388705c1236e0398f1c8246ce6426e76f27c6ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Sun, 1 Mar 2026 17:57:59 +0000
Subject: [PATCH] fix(transactions): fix toolbar overflow on mobile and shorten
 button label (#175)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Why

### Problem
On iOS (and narrow mobile screens), the transactions toolbar overflows
the viewport — the Columns button is pushed off-screen because the
actions row does not wrap.

Additionally, the \"Add Transaction\" button label was too long for
small screens, contributing to the overflow.

## What

### Changes
<img width="388" height="374" alt="image"
src="https://github.com/user-attachments/assets/7962f21d-70b7-427b-b01b-a855b687452d"
/>
---
 lang/es.json                                         |  1 +
 .../transactions/transaction-actions-menu.tsx        |  2 +-
 resources/js/pages/transactions/index.tsx            |  2 +-
 tests/Browser/AmountInputTest.php                    | 12 ++++++------
 tests/Browser/TransactionsTest.php                   |  4 ++--
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/lang/es.json b/lang/es.json
index 6b6ea5f3..37beb10d 100644
--- a/lang/es.json
+++ b/lang/es.json
@@ -1020,6 +1020,7 @@
     "Tracking": "Seguimiento",
     "Tracking spending for": "Rastreando gastos para",
     "Tracking:": "Seguimiento:",
+    "Transaction": "Transacción",
     "Transaction Date": "Fecha transaccion",
     "Transaction created successfully": "Transacción creada exitosamente",
     "Transaction created, but failed to update balance": "Transacción creada, pero no se pudo actualizar el balance",
diff --git a/resources/js/components/transactions/transaction-actions-menu.tsx b/resources/js/components/transactions/transaction-actions-menu.tsx
index a52ab096..dfe4bf6f 100644
--- a/resources/js/components/transactions/transaction-actions-menu.tsx
+++ b/resources/js/components/transactions/transaction-actions-menu.tsx
@@ -142,7 +142,7 @@ export function TransactionActionsMenu({
                                 aria-label={__('Add transaction')}
                             >
                                 <Plus className="h-5 w-5" />
-                                {__('Add Transaction')}
+                                {__('Transaction')}
                             </Button>
                         </TooltipTrigger>
                         <TooltipContent>
diff --git a/resources/js/pages/transactions/index.tsx b/resources/js/pages/transactions/index.tsx
index fa4692fd..cad786a3 100644
--- a/resources/js/pages/transactions/index.tsx
+++ b/resources/js/pages/transactions/index.tsx
@@ -1032,7 +1032,7 @@ export default function Transactions({
                         accounts={accounts}
                         isKeySet={true}
                         actions={
-                            <div className="flex w-full justify-between gap-2 sm:justify-end">
+                            <div className="flex w-full flex-wrap justify-between gap-2 sm:justify-end">
                                 <TransactionActionsMenu
                                     categories={categories}
                                     accounts={accounts}
diff --git a/tests/Browser/AmountInputTest.php b/tests/Browser/AmountInputTest.php
index 7cb97be2..1f262c37 100644
--- a/tests/Browser/AmountInputTest.php
+++ b/tests/Browser/AmountInputTest.php
@@ -16,7 +16,7 @@ it('formats amount on blur', function () {
     $page = visit('/transactions');
 
     $page->assertSee('Transactions')
-        ->click('Add Transaction')
+        ->click('Transaction')
         ->wait(1)
         ->fill('#amount', '123.45')
         ->click('description')
@@ -34,7 +34,7 @@ it('accepts comma as decimal separator', function () {
     $page = visit('/transactions');
 
     $page->assertSee('Transactions')
-        ->click('Add Transaction')
+        ->click('Transaction')
         ->wait(1)
         ->fill('#amount', '10,50')
         ->click('description')
@@ -57,9 +57,9 @@ it('can create a transaction with amount input', function () {
     $page->wait(3); // Extra wait for IndexedDB to sync
 
     $page->assertSee('Transactions')
-        ->click('Add Transaction')
+        ->click('Transaction')
         ->wait(2)
-        ->assertSee('Add Transaction')
+        ->assertSee('Transaction')
         ->wait(1)
         ->fill('#description', 'Test Transaction')
         ->wait(0.5)
@@ -99,7 +99,7 @@ it('formats amount when pressing enter', function () {
     $page->wait(3); // Extra wait for IndexedDB to sync
 
     $page->assertSee('Transactions')
-        ->click('Add Transaction')
+        ->click('Transaction')
         ->wait(1)
         ->fill('#description', 'Test Transaction Enter')
         ->fill('#amount', '99.99')
@@ -137,7 +137,7 @@ it('accepts negative amounts', function () {
     $page->wait(3); // Extra wait for IndexedDB to sync
 
     $page->assertSee('Transactions')
-        ->click('Add Transaction')
+        ->click('Transaction')
         ->wait(1)
         ->fill('#description', 'Test Negative Amount')
         ->fill('#amount', '-50.00')
diff --git a/tests/Browser/TransactionsTest.php b/tests/Browser/TransactionsTest.php
index 57ba1575..094fbc17 100644
--- a/tests/Browser/TransactionsTest.php
+++ b/tests/Browser/TransactionsTest.php
@@ -30,7 +30,7 @@ it('can open add transaction dialog', function () {
     $page = visit('/transactions');
 
     $page->assertSee('Transactions')
-        ->click('Add Transaction')
+        ->click('Transaction')
         ->wait(0.5)
         ->assertSee('Create Transaction')
         ->assertNoJavascriptErrors();
@@ -59,7 +59,7 @@ it('can create a transaction', function () {
     $page->wait(3); // Extra wait for IndexedDB to sync
 
     $page->assertSee('Transactions')
-        ->click('Add Transaction')
+        ->click('Transaction')
         ->wait(2)
         ->assertSee('Create Transaction')
         ->fill('description', 'Test Transaction')