Update design of account search dropdown in collection editor (#38739)

app/javascript/mastodon/components/form_fields/combobox.module.scss

@@ -25,7 +25,7 @@
 .popover {
   z-index: 9999;
   box-sizing: border-box;
-  max-height: max(200px, 30dvh);
+  max-height: min(320px, 50dvh);
   padding: 4px;
   border-radius: 4px;
   color: var(--color-text-primary);
@@ -63,13 +63,7 @@
   user-select: none;
 
   &[data-highlighted='true'] {
-    color: var(--color-text-on-brand-base);
-    background: var(--color-bg-brand-base);
-
-    &[aria-disabled='true'] {
-      color: var(--color-text-on-disabled);
-      background: var(--color-bg-disabled);
-    }
+    background: var(--color-bg-overlay-highlight);
   }
 
   &[aria-disabled='true'] {

app/javascript/mastodon/components/form_fields/combobox_field.tsx

@@ -82,11 +82,12 @@ interface ComboboxProps<
    * Customise the rendering of group titles.
    * The `titleId` must be attached to the element that provides the
    * accessible name for the group.
+   * Return `null` to omit rendering the group title.
    */
   renderGroupTitle?: (
     groupKey: GroupKey,
     titleId: string,
-  ) => React.ReactElement | string;
+  ) => React.ReactElement | null;
   /**
    * The main selection handler, called when an option is selected or deselected.
    */
@@ -182,7 +183,12 @@ const ComboboxWithRef = <Item extends ComboboxItem, GroupKey extends string>(
 
   const hasGroups = !Array.isArray(items);
   const flatItems = useMemo(
-    () => (hasGroups ? (Object.values(items).flat() as Item[]) : items),
+    () =>
+      hasGroups
+        ? (Object.values(items)
+            .flat()
+            .filter((i) => !!i) as Item[])
+        : items,
     [hasGroups, items],
   );
 
@@ -478,10 +484,11 @@ const ComboboxWithRef = <Item extends ComboboxItem, GroupKey extends string>(
                   {(Object.keys(items) as GroupKey[]).map((groupKey) => {
                     const groupItems = items[groupKey];
                     const groupTitleId = `${listId}-group-${groupKey}`;
-                    const groupTitle = renderGroupTitle?.(
+                    const customGroupTitle = renderGroupTitle?.(
                       groupKey,
                       groupTitleId,
-                    ) ?? <span id={groupTitleId}>{groupKey}</span>;
+                    );
+                    const hasTitle = customGroupTitle !== null;
 
                     if (!groupItems?.length) return null;
 
@@ -489,11 +496,18 @@ const ComboboxWithRef = <Item extends ComboboxItem, GroupKey extends string>(
                       <ul
                         key={groupKey}
                         role='group'
-                        aria-labelledby={groupTitleId}
+                        aria-labelledby={hasTitle ? groupTitleId : undefined}
                       >
-                        <li role='presentation' className={classes.groupLabel}>
-                          {groupTitle}
-                        </li>
+                        {hasTitle && (
+                          <li
+                            role='presentation'
+                            className={classes.groupLabel}
+                          >
+                            {customGroupTitle ?? (
+                              <span id={groupTitleId}>{groupKey}</span>
+                            )}
+                          </li>
+                        )}
                         {renderItems(groupItems)}
                       </ul>
                     );