feat: enhance UI with new background gradients and responsive design adjustments across various components

components/ui/account-filter-combobox.tsx

@@ -64,7 +64,7 @@ export function AccountFilterCombobox({
   // Get root folders (folders without parent) - same as folders/page.tsx
   const rootFolders = useMemo(
     () => folders.filter((f) => f.parentId === null),
-    [folders],
+    [folders]
   );
 
   // Get child folders for a given parent - same as FolderTreeItem
@@ -78,7 +78,7 @@ export function AccountFilterCombobox({
   // Get accounts without folder
   const orphanAccounts = useMemo(
     () => accounts.filter((a) => !a.folderId),
-    [accounts],
+    [accounts]
   );
 
   const selectedAccounts = accounts.filter((a) => value.includes(a.id));
@@ -89,7 +89,7 @@ export function AccountFilterCombobox({
     const directAccounts = getFolderAccounts(folderId);
     const childFoldersList = getChildFolders(folderId);
     const childAccounts = childFoldersList.flatMap((cf) =>
-      getAllAccountsInFolder(cf.id),
+      getAllAccountsInFolder(cf.id)
     );
     return [...directAccounts, ...childAccounts];
   };
@@ -126,7 +126,7 @@ export function AccountFilterCombobox({
 
     if (allSelected) {
       const newSelection = value.filter(
-        (v) => !allFolderAccountIds.includes(v),
+        (v) => !allFolderAccountIds.includes(v)
       );
       onChange(newSelection.length > 0 ? newSelection : ["all"]);
     } else {
@@ -153,7 +153,7 @@ export function AccountFilterCombobox({
     const folderAccounts = getAllAccountsInFolder(folderId);
     if (folderAccounts.length === 0) return false;
     const selectedCount = folderAccounts.filter((a) =>
-      value.includes(a.id),
+      value.includes(a.id)
     ).length;
     return selectedCount > 0 && selectedCount < folderAccounts.length;
   };
@@ -185,7 +185,7 @@ export function AccountFilterCombobox({
             <Check
               className={cn(
                 "h-4 w-4",
-                isFolderSelected(folder.id) ? "opacity-100" : "opacity-0",
+                isFolderSelected(folder.id) ? "opacity-100" : "opacity-0"
               )}
             />
           </div>
@@ -213,7 +213,7 @@ export function AccountFilterCombobox({
               <Check
                 className={cn(
                   "ml-auto h-4 w-4 shrink-0",
-                  value.includes(account.id) ? "opacity-100" : "opacity-0",
+                  value.includes(account.id) ? "opacity-100" : "opacity-0"
                 )}
               />
             </CommandItem>
@@ -222,7 +222,7 @@ export function AccountFilterCombobox({
 
         {/* Child folders - recursive */}
         {childFoldersList.map((childFolder) =>
-          renderFolder(childFolder, depth + 1, currentPath),
+          renderFolder(childFolder, depth + 1, currentPath)
         )}
       </div>
     );
@@ -235,7 +235,10 @@ export function AccountFilterCombobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className={cn("justify-between min-w-0", className)}
+          className={cn(
+            "justify-between min-w-0 h-10 w-full text-sm font-normal",
+            className
+          )}
         >
           <div className="flex items-center gap-2 min-w-0 flex-1">
             {selectedAccounts.length === 1 ? (
@@ -285,7 +288,7 @@ export function AccountFilterCombobox({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-[380px] p-0"
+        className="w-[calc(100vw-2rem)] sm:w-[380px] p-0"
         align="start"
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
@@ -301,10 +304,7 @@ export function AccountFilterCombobox({
                   <span className="text-xs text-muted-foreground ml-1">
                     (
                     {formatCurrency(
-                      filteredTransactions.reduce(
-                        (sum, t) => sum + t.amount,
-                        0,
-                      ),
+                      filteredTransactions.reduce((sum, t) => sum + t.amount, 0)
                     )}
                     )
                   </span>
@@ -312,7 +312,7 @@ export function AccountFilterCombobox({
                 <Check
                   className={cn(
                     "ml-auto h-4 w-4",
-                    isAll ? "opacity-100" : "opacity-0",
+                    isAll ? "opacity-100" : "opacity-0"
                   )}
                 />
               </CommandItem>
@@ -348,7 +348,7 @@ export function AccountFilterCombobox({
                           "ml-auto h-4 w-4 shrink-0",
                           value.includes(account.id)
                             ? "opacity-100"
-                            : "opacity-0",
+                            : "opacity-0"
                         )}
                       />
                     </CommandItem>