Improve category picker layout (#472)

* Improve category picker layout

* Remove extra 'general' subcategory from 'general' category.

Author: rodrigost23

src/components/AddExpense/CategoryPicker.tsx

@@ -28,7 +28,7 @@ export const CategoryPicker: React.FC<{
           <h3 className="mb-4 text-lg font-semibold">
             {t(`categories_list.${categoryName}.name`)}
           </h3>
-          <div className="flex flex-wrap justify-between gap-2">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(75px,1fr))] gap-4">
             {categoryItems.map((key: string) => {
               const handleClick = useMemo(
                 () => () => {
@@ -41,15 +41,15 @@ export const CategoryPicker: React.FC<{
                 <DrawerClose key={key}>
                   <Button
                     variant="ghost"
-                    className="flex w-[75px] flex-col gap-1 py-8 text-center"
+                    className="flex h-[75px] w-[75px] flex-col items-center justify-start gap-1 justify-self-center py-3 text-center"
                     onClick={handleClick}
                   >
-                    <span className="block text-2xl">
+                    <span className="block flex-shrink-0 text-2xl">
                       <CategoryIcon
                         category={(key === 'other' ? categoryName : key) as CategoryItem}
                       />
                     </span>
-                    <span className="block text-xs capitalize">
+                    <span className="block text-xs text-wrap">
                       {t(`categories_list.${categoryName}.items.${key}`, { ns: 'categories' })}
                     </span>
                   </Button>

src/lib/category.ts

@@ -15,7 +15,7 @@ export const CATEGORIES = {
   life: ['childcare', 'clothing', 'education', 'gifts', 'insurance', 'medical', 'taxes', 'other'],
   travel: ['bicycle', 'bus', 'train', 'car', 'fuel', 'hotel', 'parking', 'plane', 'taxi', 'other'],
   utilities: ['cleaning', 'electricity', 'gas', 'internet', 'trash', 'phone', 'water', 'other'],
-  general: ['general', 'other'],
+  general: ['other'],
 } as const satisfies Record<string, string[]>;
 
 export const DEFAULT_CATEGORY = 'general';