fixing styling clear filter

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -113,22 +113,69 @@ const ListToolbar = () => {
     <div className="card-header flex-wrap border-b-0 px-5">
       <div className="flex flex-wrap gap-1 w-full">
         <div className="flex justify-between w-full items-center mb-3">
-          <div className="flex w-[34%] gap-1 items-center">
+          <div className="flex flex-nowrap items-end gap-3 w-full overflow-x-auto">
+            <div className="w-48 shrink-0">
               <label className="input input-sm w-full text-sm">
                 <KeenIcon icon="magnifier" />
                 <input
                   type="text"
-                placeholder="Search Transaction Type Name"
+                  placeholder="Search Name"
                   value={searchValue}
                   onChange={(e) => setSearchValue(e.target.value)}
                 />
               </label>
             </div>
 
-          <div className="flex gap-2 items-center">
+            <div className="min-w-[220px] shrink-0">
-            <Button variant="outline" className="h-8 px-3 text-xs" onClick={handleClearFilter}>
+              <Select
-              Clear
+                key={`type-filter-${statusTypes}`}
+                value={statusTypes}
+                onValueChange={setStatusTypes}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Select Status Transaction Type" />
+                </SelectTrigger>
+                <SelectContent className="max-h-64 overflow-y-auto">
+                  {types.map((opt) => (
+                    <SelectItem key={opt} value={opt} className="truncate">
+                      {typeLabelMap[opt] ?? opt}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="min-w-[220px] shrink-0">
+              <Select
+                key={`approval-filter-${approval}`}
+                value={approval}
+                onValueChange={setApproval}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Select Status Approval" />
+                </SelectTrigger>
+                <SelectContent className="max-h-64 overflow-y-auto">
+                  <SelectItem value="Y" className="truncate">
+                    Yes
+                  </SelectItem>
+                  <SelectItem value="N" className="truncate">
+                    No
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <DefaultTooltip title={'Reset Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                onClick={handleClearFilter}
+              >
+                <KeenIcon icon="arrow-circle-left" />
               </Button>
+            </DefaultTooltip>
+          </div>
+
+          <div className="flex gap-2 items-center">
             <Button
               variant="outline"
               className="h-8 px-3 text-xs"
@@ -144,46 +191,6 @@ const ListToolbar = () => {
           </div>
         </div>
 
-        <div className="flex flex-wrap gap-2 w-full">
-          <div className="min-w-[220px]">
-            <Select
-              key={`type-filter-${statusTypes}`}
-              value={statusTypes}
-              onValueChange={setStatusTypes}
-            >
-              <SelectTrigger className="h-8 text-sm">
-                <SelectValue placeholder="Select Status Transaction Type" />
-              </SelectTrigger>
-              <SelectContent className="w-[var(--radix-select-trigger-width)] max-h-64 overflow-y-auto">
-                {types.map((opt) => (
-                  <SelectItem key={opt} value={opt} className="truncate">
-                    {typeLabelMap[opt] ?? opt}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="min-w-[220px]">
-            <Select
-              key={`approval-filter-${approval}`}
-              value={approval}
-              onValueChange={setApproval}
-            >
-              <SelectTrigger className="h-8 text-sm">
-                <SelectValue placeholder="Select Status Approval" />
-              </SelectTrigger>
-              <SelectContent className="w-[var(--radix-select-trigger-width)] max-h-64 overflow-y-auto">
-                <SelectItem value="Y" className="truncate">
-                  Yes
-                </SelectItem>
-                <SelectItem value="N" className="truncate">
-                  No
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
       </div>
     </div>
   );

src/pages/wallet/wallet-history/blocks/ListToolbar.tsx

@@ -182,9 +182,15 @@ const ListToolbar = () => {
           </div>
 
           <div className="flex gap-3 items-center">
-            <Button variant="outline" size="sm" onClick={handleClearAllFilters}>
+          <DefaultTooltip title={'Reset Filter'} placement={'top'}>
-              Clear
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                onClick={handleClearAllFilters}
+              >
+                <KeenIcon icon="arrow-circle-left" />
               </Button>
+            </DefaultTooltip>
             <DefaultTooltip title={'Refresh'} placement={'top'}>
               <Button variant="outline" className="h-7.5" onClick={handleRefresh}>
                 <KeenIcon icon="arrows-circle" />