Evenly space reactions

src/button/ReactionToggleButton.module.css

@@ -4,19 +4,35 @@
 
 .reactionPopupMenu {
   display: flex;
+  width: fit-content;
 }
 
 .reactionPopupMenuModal {
   top: 82vh !important;
 }
 
-.reactionPopupMenu section {
-  height: fit-content;
-  flex: auto;
+.reactionPopupMenuRoot {
+  width: fit-content !important;
 }
 
-.reactionsMenuSection {
+.reactionPopupMenuRoot > div {
+  width: fit-content;
+}
+
+.reactionPopupMenuModal > div > div {
+  padding-inline: var(--cpd-space-6x) !important;
+  padding-block: var(--cpd-space-6x) !important;
+}
+
+.reactionPopupMenu section {
+  height: fit-content;
+  flex: 1;
+  max-width: fit-content;
+}
+
+.reactionPopupMenu section.reactionsMenuSection {
   margin: auto 0;
+  flex: auto;
 }
 
 :root {
@@ -31,8 +47,7 @@
   );
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-wrap: wrap;
+  flex-grow: 1;
   gap: var(--cpd-separator-spacing);
   /* Height of 3 rows plus padding. */
   max-height: calc(
@@ -41,9 +56,26 @@
           var(--cpd-separator-spacing)
       ) * 4
   );
-  max-width: 22.5em;
+  width: calc(
+    (
+        var(--reaction-button-size) + var(--reaction-button-padding) +
+          var(--cpd-separator-spacing)
+      ) * 6.5
+  );
+  overflow-x: hidden;
   overflow-y: auto;
   list-style: none;
+  flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: start;
+  align-items: auto;
+  align-content: start;
+}
+
+.reactionsMenu > * {
+  flex: 0 0 auto;
 }
 
 .reactionButton {

src/button/ReactionToggleButton.tsx

@@ -79,10 +79,9 @@ export function ReactionPopupMenu({
   const [isFullyExpanded, setExpanded] = useState(false);
 
   const filteredReactionSet = useMemo(
-    () => (isFullyExpanded ? ReactionSet : ReactionSet.slice(0, 6)),
+    () => (isFullyExpanded ? ReactionSet : ReactionSet.slice(0, 5)),
     [isFullyExpanded],
   );
-
   const label = isHandRaised ? t("action.lower_hand") : t("action.raise_hand");
   return (
     <>
@@ -110,7 +109,12 @@ export function ReactionPopupMenu({
         </section>
         <div className={styles.verticalSeperator} />
         <section className={styles.reactionsMenuSection}>
-          <menu className={styles.reactionsMenu}>
+          <menu
+            className={classNames(
+              isFullyExpanded && styles.reactionsMenuExpanded,
+              styles.reactionsMenu,
+            )}
+          >
             {filteredReactionSet.map((reaction) => (
               <li key={reaction.name}>
                 <Tooltip label={reaction.name}>
@@ -173,6 +177,10 @@ export function ReactionToggleButton({
     setErrorText(undefined);
   }, [showReactionsMenu]);
 
+  useEffect(() => {
+    return () => setShowReactionsMenu(false);
+  }, [setShowReactionsMenu]);
+
   const canReact = !reactions[userId];
 
   const sendRelation = useCallback(
@@ -273,6 +281,7 @@ export function ReactionToggleButton({
         title={t("action.pick_reaction")}
         hideHeader
         classNameModal={styles.reactionPopupMenuModal}
+        className={styles.reactionPopupMenuRoot}
         onDismiss={() => setShowReactionsMenu(false)}
       >
         <ReactionPopupMenu