Improve Active Filters: remove max-height/scroll, add X icon for close button, make box size dynamically based on content length. Also make X icon immediately sync filter changes in FilterList component

Author: anyachen27

app/components/FilterList.js

@@ -11,6 +11,11 @@ const FilterList = ({
 }) => {
   const [openSections, setOpenSections] = useState({})
   const [pendingList, setPendingList] = useState(filterList)
+
+  // Sync pendingList when filterList changes (ex. when a filter is removed via X)
+  useEffect(() => {
+    setPendingList(filterList)
+  }, [filterList])
   // Calculate available filters from the actual data
   const availableFilters = useMemo(() => {
     const filters = {}

app/matches/[slug]/page.js

@@ -352,16 +352,26 @@ const MatchPage = ({ params }) => {
         </div>
         <div className={styles.sidebar}>
           <div className={filterListStyles.activeFilterListContainer}>
-            Active Filters:
+            <div style={{ width: '100%', marginBottom: '0.5vw' }}>
+              Active Filters:
+            </div>
             <ul className={filterListStyles.activeFilterList}>
               {sortedFilterList.map(([key, value]) => (
                 <li
                   className={filterListStyles.activeFilterItem}
                   key={`${key}-${value}`}
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => removeFilter(key, value)}
                 >
-                  {findDisplayName(key)}: {value}
+                  <span>{findDisplayName(key)}: {value}</span>
+                  <button
+                    className={filterListStyles.closeButton}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      removeFilter(key, value)
+                    }}
+                    aria-label="Remove filter"
+                  >
+                    ×
+                  </button>
                 </li>
               ))}
             </ul>

app/styles/FilterList.module.css

@@ -1,41 +1,41 @@
 .activeFilterListContainer {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
   box-sizing: border-box;
   padding: 0.5vw;
   margin-bottom: 1vw;
   background-color: #ffffff;
   border: 1px solid #eaeaea;
   border-radius: 10px;
   font-size: 1.2vw;
+  width: 100%;
 }
 
 .activeFilterList {
   padding: 0;
   list-style-type: none;
   margin: 0;
   border-radius: 0.3vw;
-  overflow-y: scroll;
-  max-height: 5vw;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 0.5vw;
   width: 100%;
 }
 
 .activeFilterItem {
-  background-color: #fafafa; /* Slightly lighter to distinguish from hover state */
+  background-color: #fafafa;
   color: #333;
-  border: 1px solid #eaeaea; /* Subtle border color */
+  border: 1px solid #eaeaea;
   border-radius: 0.25vw;
-  padding: 0.625vw 2.5vw;
-  margin: 0.5vw;
+  padding: 0.4vw 1.5vw;
   cursor: pointer;
   font-size: 1vw;
-  padding: 0.4vw 1.5vw; /* reduced padding to match smaller text */
-  margin: 0.3vw;
-  transition: all 0.2s ease-in-out; /* Smooth transition for all properties */
+  transition: all 0.2s ease-in-out;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5vw;
+  white-space: nowrap;
 }
 
 .activeFilterItem:hover {
@@ -44,10 +44,29 @@
 }
 
 .activeFilterItem.active {
-  background-color: #d1eaff; /* A light blue to indicate active status */
-  color: #0056b3; /* A darker blue to match */
-  border-color: #0056b3; /* Same dark blue for the border */
-  box-shadow: 0 0.8vw 1.6vw rgba(0, 0, 0, 0.1); /* Consistent with hover state */
+  background-color: #d1eaff;
+  color: #0056b3;
+  border-color: #0056b3;
+  box-shadow: 0 0.8vw 1.6vw rgba(0, 0, 0, 0.1);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2vw;
+  color: #666;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s ease;
+  font-weight: bold;
+}
+
+.closeButton:hover {
+  color: #333;
 }
 
 .availableFilterList {