From 1d16d74383bc9617b04a46e96c0fa8b16d0ee047 Mon Sep 17 00:00:00 2001
From: Mihaly Hobor <hoborm0@gmail.com>
Date: Thu, 9 Apr 2026 01:35:49 +0200
Subject: [PATCH] Add 32px height for filter list, align cogwheel with filters

---
 .../Chores/components/CustomFilterChips.jsx   | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/views/Chores/components/CustomFilterChips.jsx b/src/views/Chores/components/CustomFilterChips.jsx
index fc6f221..563bb93 100644
--- a/src/views/Chores/components/CustomFilterChips.jsx
+++ b/src/views/Chores/components/CustomFilterChips.jsx
@@ -6,7 +6,15 @@ import {
   Star,
   StarBorder,
 } from '@mui/icons-material'
-import { Box, Chip, Menu, MenuItem, Tooltip, Typography } from '@mui/joy'
+import {
+  Box,
+  Chip,
+  Menu,
+  MenuItem,
+  Tooltip,
+  Typography,
+  IconButton,
+} from '@mui/joy'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { getTextColorFromBackgroundColor } from '../../../utils/Colors'
@@ -107,6 +115,7 @@ const CustomFilterChips = ({
                   transition: 'all 0.2s ease',
                   px: 1.0,
                   py: 0.5,
+                  height: 32,
 
                   opacity: hasWarning ? 0.7 : isActive ? 1 : 0.85,
                   ...(hasCustomColor && {
@@ -189,10 +198,12 @@ const CustomFilterChips = ({
         )
       })}
 
-      <Chip
+      <IconButton
         variant='outlined'
-        size='lg'
-        sx={{ cursor: 'pointer', minWidth: 'auto', px: 0.8 }}
+        size='sm'
+        sx={{
+          borderRadius: 24,
+        }}
         onClick={e => {
           e.preventDefault()
           e.stopPropagation()
@@ -200,7 +211,7 @@ const CustomFilterChips = ({
         }}
       >
         <Settings />
-      </Chip>
+      </IconButton>
 
       <Menu
         anchorEl={menuAnchor}