From 389e272318f74be0e749aafe3ae01c54f10dbed7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Wed, 10 Dec 2025 13:28:45 +0100
Subject: [PATCH] Refactor transaction UI components for better responsive
 layout and consistency

- Remove explicit button sizes from transaction actions menu
- Improve action buttons layout with flex containers and responsive classes
- Add hideColumnTextOnMobile prop to DataTableViewOptions for better mobile control
- Fix Tailwind class ordering and indentation in categorize page
- Update transaction filters actions container for better mobile layout
---
 .../transactions/transaction-actions-menu.tsx |  4 +-
 .../transactions/transaction-filters.tsx      |  8 +---
 .../transactions/transaction-list.tsx         |  9 ++--
 .../components/ui/data-table-view-options.tsx |  9 ++--
 .../js/pages/transactions/categorize.tsx      | 48 +++++++++----------
 resources/js/pages/transactions/index.tsx     |  4 +-
 6 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/resources/js/components/transactions/transaction-actions-menu.tsx b/resources/js/components/transactions/transaction-actions-menu.tsx
index 880d3838..436d4bd8 100644
--- a/resources/js/components/transactions/transaction-actions-menu.tsx
+++ b/resources/js/components/transactions/transaction-actions-menu.tsx
@@ -100,7 +100,6 @@ export function TransactionActionsMenu({
                         <TooltipTrigger asChild>
                             <Button
                                 variant="outline"
-                                size="sm"
                                 className={
                                     !isKeySet || uncategorizedCount === 0
                                         ? 'cursor-not-allowed opacity-50'
@@ -138,7 +137,6 @@ export function TransactionActionsMenu({
                         <TooltipTrigger asChild>
                             <Button
                                 variant="outline"
-                                size={'sm'}
                                 className={
                                     !isKeySet
                                         ? 'cursor-not-allowed opacity-50'
@@ -166,7 +164,7 @@ export function TransactionActionsMenu({
                                 <DropdownMenuTrigger asChild>
                                     <Button
                                         variant="outline"
-                                        size="icon-sm"
+                                        size="icon"
                                         aria-label="More actions"
                                     >
                                         <ChevronDown className="h-4 w-4" />
diff --git a/resources/js/components/transactions/transaction-filters.tsx b/resources/js/components/transactions/transaction-filters.tsx
index 7a58bc16..44ea42c0 100644
--- a/resources/js/components/transactions/transaction-filters.tsx
+++ b/resources/js/components/transactions/transaction-filters.tsx
@@ -89,7 +89,7 @@ export function TransactionFilters({
 
     return (
         <div className="space-y-4">
-            <div className="flex flex-col flex-wrap items-center gap-3 sm:flex-row">
+            <div className="flex flex-col items-center gap-3 sm:flex-row">
                 <div className="flex w-full flex-row items-center gap-2 sm:w-auto">
                     <Input
                         placeholder={
@@ -406,11 +406,7 @@ export function TransactionFilters({
                         Clear
                     </Button>
                 )}
-                {actions ? (
-                    <div className="ml-auto flex items-center gap-2">
-                        {actions}
-                    </div>
-                ) : null}
+                {actions ? <div className="w-full">{actions}</div> : null}
             </div>
         </div>
     );
diff --git a/resources/js/components/transactions/transaction-list.tsx b/resources/js/components/transactions/transaction-list.tsx
index 2bc6765d..9e813db2 100644
--- a/resources/js/components/transactions/transaction-list.tsx
+++ b/resources/js/components/transactions/transaction-list.tsx
@@ -1112,7 +1112,7 @@ export function TransactionList({
                     isKeySet={isKeySet}
                     hideAccountFilter={hideAccountFilter}
                     actions={
-                        <>
+                        <div className="flex justify-end gap-2">
                             {showActionsMenu && (
                                 <TransactionActionsMenu
                                     categories={categories}
@@ -1131,8 +1131,11 @@ export function TransactionList({
                                 />
                             )}
                             {headerActions}
-                            <DataTableViewOptions table={table} />
-                        </>
+                            <DataTableViewOptions
+                                table={table}
+                                hideColumnTextOnMobile={false}
+                            />
+                        </div>
                     }
                 />
 
diff --git a/resources/js/components/ui/data-table-view-options.tsx b/resources/js/components/ui/data-table-view-options.tsx
index 72fa3a79..9b6eee92 100644
--- a/resources/js/components/ui/data-table-view-options.tsx
+++ b/resources/js/components/ui/data-table-view-options.tsx
@@ -9,13 +9,16 @@ import {
     DropdownMenuContent,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
 
 interface DataTableViewOptionsProps<TData> {
     table: TableType<TData>;
+    hideColumnTextOnMobile?: boolean
 }
 
 export function DataTableViewOptions<TData>({
     table,
+    hideColumnTextOnMobile = true,
 }: DataTableViewOptionsProps<TData>) {
     const columns = table
         .getAllLeafColumns()
@@ -35,9 +38,9 @@ export function DataTableViewOptions<TData>({
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm">
-                    <span className='hidden sm:inline'>Columns</span>
-                    <SlidersHorizontal className="ml-2 h-4 w-4" />
+                <Button variant="outline" className='flex gap-2'>
+                    <span className={cn({ 'hidden sm:inline': hideColumnTextOnMobile })}>Columns</span>
+                    <SlidersHorizontal className="h-4 w-4" />
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
diff --git a/resources/js/pages/transactions/categorize.tsx b/resources/js/pages/transactions/categorize.tsx
index 1910ba3d..4d7c8aa9 100644
--- a/resources/js/pages/transactions/categorize.tsx
+++ b/resources/js/pages/transactions/categorize.tsx
@@ -585,7 +585,7 @@ export default function CategorizeTransactions({
                 <header className="flex items-center justify-between px-4 py-3 dark:border-zinc-800">
                     <Link
                         href={categorizeRoute.url()?.replace('/categorize', '')}
-                        className="hidden sm:flex items-center gap-2 text-sm text-zinc-600 opacity-50 transition-all duration-200 hover:text-zinc-900 hover:opacity-100 dark:text-zinc-400 dark:hover:text-zinc-100"
+                        className="hidden items-center gap-2 text-sm text-zinc-600 opacity-50 transition-all duration-200 hover:text-zinc-900 hover:opacity-100 sm:flex dark:text-zinc-400 dark:hover:text-zinc-100"
                     >
                         <ArrowLeft className="h-4 w-4" />
                         Back to Transactions
@@ -627,7 +627,7 @@ export default function CategorizeTransactions({
                             <span className="hidden sm:inline">Skip</span>
                             <Kbd>Ctrl+N</Kbd>
                         </Button>
-                        <div className="hidden sm:flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-400">
+                        <div className="hidden items-center gap-2 text-sm text-zinc-600 sm:flex dark:text-zinc-400">
                             <span className="font-medium text-zinc-900 dark:text-zinc-100">
                                 {remainingCount}
                             </span>
@@ -673,11 +673,11 @@ export default function CategorizeTransactions({
                                         className={cn(
                                             'rounded-2xl border border-zinc-200 bg-white p-6 shadow-xl shadow-zinc-200/50 transition-all duration-300 dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-zinc-900/50',
                                             animationState === 'exiting' &&
-                                            'translate-y-[-20px] scale-95 opacity-0',
+                                                'translate-y-[-20px] scale-95 opacity-0',
                                             animationState === 'entering' &&
-                                            'animate-card-enter',
+                                                'animate-card-enter',
                                             animationState === 'idle' &&
-                                            'translate-y-0 scale-100 opacity-100',
+                                                'translate-y-0 scale-100 opacity-100',
                                         )}
                                     >
                                         <div className="flex flex-col gap-4">
@@ -700,20 +700,20 @@ export default function CategorizeTransactions({
                                                                 {currentTransaction
                                                                     .bank
                                                                     ?.logo && (
-                                                                        <img
-                                                                            src={
-                                                                                currentTransaction
-                                                                                    .bank
-                                                                                    .logo
-                                                                            }
-                                                                            alt={
-                                                                                currentTransaction
-                                                                                    .bank
-                                                                                    .name
-                                                                            }
-                                                                            className="h-5 w-5 rounded"
-                                                                        />
-                                                                    )}
+                                                                    <img
+                                                                        src={
+                                                                            currentTransaction
+                                                                                .bank
+                                                                                .logo
+                                                                        }
+                                                                        alt={
+                                                                            currentTransaction
+                                                                                .bank
+                                                                                .name
+                                                                        }
+                                                                        className="h-5 w-5 rounded"
+                                                                    />
+                                                                )}
                                                                 <EncryptedText
                                                                     encryptedText={
                                                                         currentTransaction
@@ -750,8 +750,8 @@ export default function CategorizeTransactions({
                                                     className={cn(
                                                         'rounded px-1',
                                                         currentTransaction.amount >=
-                                                        0 &&
-                                                        'bg-green-100/70 dark:bg-green-900',
+                                                            0 &&
+                                                            'bg-green-100/70 dark:bg-green-900',
                                                     )}
                                                 >
                                                     {formatAmount(
@@ -770,11 +770,11 @@ export default function CategorizeTransactions({
                                 className={cn(
                                     'flex flex-col gap-4 px-6 pt-2 transition-all duration-300',
                                     animationState === 'exiting' &&
-                                    'translate-y-[-10px] opacity-0',
+                                        'translate-y-[-10px] opacity-0',
                                     animationState === 'entering' &&
-                                    'animate-command-enter',
+                                        'animate-command-enter',
                                     animationState === 'idle' &&
-                                    'translate-y-0 opacity-100',
+                                        'translate-y-0 opacity-100',
                                 )}
                             >
                                 <div className="flex flex-col gap-1">
diff --git a/resources/js/pages/transactions/index.tsx b/resources/js/pages/transactions/index.tsx
index 3aea133a..1897d4dc 100644
--- a/resources/js/pages/transactions/index.tsx
+++ b/resources/js/pages/transactions/index.tsx
@@ -1084,7 +1084,7 @@ export default function Transactions({ categories, accounts, banks }: Props) {
                         accounts={accounts}
                         isKeySet={isKeySet}
                         actions={
-                            <>
+                            <div className="flex w-full justify-between gap-2 sm:justify-end">
                                 <TransactionActionsMenu
                                     categories={categories}
                                     accounts={accounts}
@@ -1101,7 +1101,7 @@ export default function Transactions({ categories, accounts, banks }: Props) {
                                     }}
                                 />
                                 <DataTableViewOptions table={table} />
-                            </>
+                            </div>
                         }
                     />