From b455ad71ddc9b100107fcf67b7b78f907f698de5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Tue, 3 Mar 2026 14:06:51 +0000
Subject: [PATCH] fix(transactions): move clear button inline with filters row
 on all screen sizes (#192)

## Summary

- Moves the **Clear** button into the same flex row as the search input
and Filters button, so it always appears to the right of the Filters
button instead of wrapping to a new row
- Makes the filter row (`w-full`) stretch to 100% width on small
displays
- Fixes the search input sizing to use `min-w-0 flex-1` so it shrinks
properly on narrow screens
---
 .../transactions/transaction-filters.tsx      | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/transactions/transaction-filters.tsx b/resources/js/components/transactions/transaction-filters.tsx
index b5f71607..ef87ca3e 100644
--- a/resources/js/components/transactions/transaction-filters.tsx
+++ b/resources/js/components/transactions/transaction-filters.tsx
@@ -128,13 +128,13 @@ export function TransactionFilters({
 
     return (
         <div className="space-y-4">
-            <div className="flex flex-col items-center gap-3 lg:flex-row">
-                <div className="flex w-full flex-row items-center gap-2 lg:w-auto">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+                <div className="flex w-full flex-row items-center gap-2">
                     <Input
                         placeholder={__('Search description or notes...')}
                         value={searchText}
                         onChange={(e) => setSearchText(e.target.value)}
-                        className="max-w-sm flex-1 md:max-w-full md:min-w-[350px]"
+                        className="min-w-0 flex-1 md:min-w-[350px]"
                     />
 
                     <Popover open={isOpen} onOpenChange={setIsOpen}>
@@ -542,19 +542,20 @@ export function TransactionFilters({
                             </div>
                         </PopoverContent>
                     </Popover>
+
+                    {activeFilterCount > 0 && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={clearFilters}
+                            className="h-9"
+                        >
+                            <X className="mr-1 h-4 w-4" />
+                            {__('Clear')}
+                        </Button>
+                    )}
                 </div>
 
-                {activeFilterCount > 0 && (
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={clearFilters}
-                        className="h-9"
-                    >
-                        <X className="mr-1 h-4 w-4" />
-                        {__('Clear')}
-                    </Button>
-                )}
                 {actions ? <div className="w-full">{actions}</div> : null}
             </div>
         </div>