diff --git a/src/Modal.tsx b/src/Modal.tsx
index deef7635..b8f75305 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -27,6 +27,11 @@ import { useMediaQuery } from "./useMediaQuery";
 
 export interface Props {
   title: string;
+  /**
+   * Hide the modal header. Used for smaller popups where the context is readily apparent.
+   * A title should still be specified for users using assistive technology.
+   */
+  hideHeader?: boolean;
   children: ReactNode;
   className?: string;
   /**
@@ -54,6 +59,7 @@ export interface Props {
  */
 export const Modal: FC<Props> = ({
   title,
+  hideHeader,
   children,
   className,
   open,
@@ -108,6 +114,28 @@ export const Modal: FC<Props> = ({
       </Drawer.Root>
     );
   } else {
+    const titleNode = (
+      <DialogTitle asChild>
+        <Heading as="h2" weight="semibold" size="md">
+          {title}
+        </Heading>
+      </DialogTitle>
+    );
+    const header = (
+      <div className={styles.header}>
+        {titleNode}
+        {onDismiss !== undefined && (
+          <DialogClose
+            className={styles.close}
+            data-testid="modal_close"
+            aria-label={t("action.close")}
+          >
+            <CloseIcon width={20} height={20} />
+          </DialogClose>
+        )}
+      </div>
+    );
+
     return (
       <DialogRoot open={open} onOpenChange={onOpenChange}>
         <DialogPortal>
@@ -119,31 +147,19 @@ export const Modal: FC<Props> = ({
           <DialogContent asChild aria-describedby={undefined} {...rest}>
             <Glass
               className={classNames(
-                className,
                 overlayStyles.overlay,
                 overlayStyles.animate,
                 styles.modal,
                 styles.dialog,
                 { [styles.tabbed]: tabbed },
+                className,
               )}
             >
               <div className={styles.content}>
-                <div className={styles.header}>
-                  <DialogTitle asChild>
-                    <Heading as="h2" weight="semibold" size="md">
-                      {title}
-                    </Heading>
-                  </DialogTitle>
-                  {onDismiss !== undefined && (
-                    <DialogClose
-                      className={styles.close}
-                      data-testid="modal_close"
-                      aria-label={t("action.close")}
-                    >
-                      <CloseIcon width={20} height={20} />
-                    </DialogClose>
-                  )}
-                </div>
+                {!hideHeader ? header : null}
+                {hideHeader ? (
+                  <VisuallyHidden asChild>{titleNode}</VisuallyHidden>
+                ) : null}
                 <div className={styles.body}>{children}</div>
               </div>
             </Glass>
diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css
index 16a5bf0a..c6b65de5 100644
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -3,13 +3,20 @@
 }
 
 .reactionPopupMenu {
-  background: var(--cpd-color-bg-canvas-default);
-  border-radius: var(--cpd-space-4x);
-  width: fit-content;
-  top: 70vh;
-  padding: 1em;
-  position: absolute;
-  border: none;
+  display: flex;
+}
+
+/* These styles override the Modal styles to ensure our emoji
+   picker appears near the toolbar */
+
+.reactionPopupMenuModal {
+  width: fit-content !important;
+  top: 82vh !important;
+}
+
+.reactionPopupMenuModal > div > div {
+  padding-inline: var(--cpd-space-6x) !important;
+  padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
 }
 
 .reactionPopupMenu menu {
@@ -35,6 +42,8 @@
 }
 
 .reactionButton {
+  padding: 1em;
+  font-size: 2em;
   width: 2em;
   height: 2em;
   border-radius: 2em;
diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx
index 052053df..7aa877e3 100644
--- a/src/button/ReactionToggleButton.tsx
+++ b/src/button/ReactionToggleButton.tsx
@@ -22,14 +22,10 @@ import {
   ChangeEventHandler,
   ComponentPropsWithoutRef,
   FC,
-  forwardRef,
   KeyboardEventHandler,
-  PropsWithRef,
   ReactNode,
   useCallback,
-  useEffect,
   useMemo,
-  useRef,
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
@@ -47,6 +43,7 @@ import {
   ReactionSet,
   ElementCallReactionEventType,
 } from "../reactions";
+import { Modal } from "../Modal";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
   raised: boolean;
@@ -70,17 +67,17 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
   );
 };
 
-interface ReactionsPopupMenuProps {
+export function ReactionPopupMenu({
+  sendReaction,
+  toggleRaisedHand,
+  isHandRaised,
+  canReact,
+}: {
   sendReaction: (reaction: ReactionOption) => void;
   toggleRaisedHand: () => void;
   isHandRaised: boolean;
   canReact: boolean;
-}
-
-export const ReactionPopupMenu = forwardRef<
-  HTMLDialogElement,
-  ReactionsPopupMenuProps
->(({ sendReaction, toggleRaisedHand, isHandRaised, canReact }, ref) => {
+}): ReactNode {
   const { t } = useTranslation();
   const [searchText, setSearchText] = useState("");
   const [isSearching, setIsSearching] = useState(false);
@@ -122,84 +119,82 @@ export const ReactionPopupMenu = forwardRef<
   );
 
   return (
-    <dialog ref={ref} className={styles.reactionPopupMenu} open={false}>
-      <div style={{ display: "flex" }}>
-        <section className={styles.handRaiseSection}>
-          <Tooltip label={t("common.raise_hand")}>
-            <CpdButton
-              kind={isHandRaised ? "primary" : "secondary"}
-              aria-pressed={isHandRaised}
-              aria-label="Toggle hand raised"
-              className={styles.reactionButton}
-              key="raise-hand"
-              onClick={() => toggleRaisedHand()}
-            >
-              🖐️
-            </CpdButton>
-          </Tooltip>
-        </section>
-        <div className={styles.verticalSeperator} />
-        <section>
-          {isSearching ? (
-            <>
-              <Form.Root className={styles.searchForm}>
-                <Search
-                  required
-                  value={searchText}
-                  name="reactionSearch"
-                  placeholder="Search reactions…"
-                  onChange={onSearch}
-                  onKeyDown={onSearchKeyDown}
-                  // This is a reasonable use of autofocus, we are focusing when
-                  // the search button is clicked (which matches the Element Web reaction picker)
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
-                />
+    <div className={styles.reactionPopupMenu}>
+      <section className={styles.handRaiseSection}>
+        <Tooltip label={t("common.raise_hand")}>
+          <CpdButton
+            kind={isHandRaised ? "primary" : "secondary"}
+            aria-pressed={isHandRaised}
+            aria-label="Toggle hand raised"
+            className={styles.reactionButton}
+            key="raise-hand"
+            onClick={() => toggleRaisedHand()}
+          >
+            🖐️
+          </CpdButton>
+        </Tooltip>
+      </section>
+      <div className={styles.verticalSeperator} />
+      <section>
+        {isSearching ? (
+          <>
+            <Form.Root className={styles.searchForm}>
+              <Search
+                required
+                value={searchText}
+                name="reactionSearch"
+                placeholder="Search reactions…"
+                onChange={onSearch}
+                onKeyDown={onSearchKeyDown}
+                // This is a reasonable use of autofocus, we are focusing when
+                // the search button is clicked (which matches the Element Web reaction picker)
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus
+              />
+              <CpdButton
+                Icon={CloseIcon}
+                aria-label="close search"
+                size="sm"
+                kind="destructive"
+                onClick={() => setIsSearching(false)}
+              />
+            </Form.Root>
+            <Separator />
+          </>
+        ) : null}
+        <menu>
+          {filteredReactionSet.map((reaction) => (
+            <li className={styles.reactionPopupMenuItem} key={reaction.name}>
+              <Tooltip label={reaction.name}>
                 <CpdButton
-                  Icon={CloseIcon}
-                  aria-label="close search"
-                  size="sm"
-                  kind="destructive"
-                  onClick={() => setIsSearching(false)}
+                  kind="secondary"
+                  className={styles.reactionButton}
+                  disabled={!canReact}
+                  onClick={() => sendReaction(reaction)}
+                >
+                  {reaction.emoji}
+                </CpdButton>
+              </Tooltip>
+            </li>
+          ))}
+          {!isSearching ? (
+            <li key="search" className={styles.reactionPopupMenuItem}>
+              <Tooltip label="Search">
+                <CpdButton
+                  iconOnly
+                  aria-label="Open reactions search"
+                  Icon={SearchIcon}
+                  kind="tertiary"
+                  onClick={() => setIsSearching(true)}
                 />
-              </Form.Root>
-              <Separator />
-            </>
+              </Tooltip>
+            </li>
           ) : null}
-          <menu>
-            {filteredReactionSet.map((reaction) => (
-              <li className={styles.reactionPopupMenuItem} key={reaction.name}>
-                <Tooltip label={reaction.name}>
-                  <CpdButton
-                    kind="secondary"
-                    className={styles.reactionButton}
-                    disabled={!canReact}
-                    onClick={() => sendReaction(reaction)}
-                  >
-                    {reaction.emoji}
-                  </CpdButton>
-                </Tooltip>
-              </li>
-            ))}
-            {!isSearching ? (
-              <li key="search" className={styles.reactionPopupMenuItem}>
-                <Tooltip label="Search">
-                  <CpdButton
-                    iconOnly
-                    aria-label="Open reactions search"
-                    Icon={SearchIcon}
-                    kind="tertiary"
-                    onClick={() => setIsSearching(true)}
-                  />
-                </Tooltip>
-              </li>
-            ) : null}
-          </menu>
-        </section>
-      </div>
-    </dialog>
+        </menu>
+      </section>
+    </div>
   );
-});
+}
 
 interface ReactionToggleButtonProps {
   rtcSession: MatrixRTCSession;
@@ -215,37 +210,10 @@ export function ReactionToggleButton({
   const userId = client.getUserId()!;
   const isHandRaised = !!raisedHands[userId];
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
-  const ref = useRef<HTMLDialogElement>(null);
+  const [showReactionsMenu, setShowReactionsMenu] = useState(false);
 
   const canReact = !reactions[userId];
 
-  const showReactionsMenu = useCallback(() => {
-    if (ref.current) {
-      ref.current.showModal();
-    }
-  }, [ref]);
-
-  const hideReactionsMenu = useCallback(() => {
-    if (ref.current) {
-      ref.current.close();
-    }
-  }, [ref]);
-
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    function onClick(evt: MouseEvent) {
-      if (evt.target === ref.current) {
-        hideReactionsMenu();
-      }
-    }
-    ref.current.addEventListener("click", onClick);
-    return () => {
-      ref.current?.removeEventListener("click", onClick);
-    };
-  }, [ref]);
-
   const sendRelation = useCallback(
     async (reaction: ReactionOption) => {
       const myMembership = memberships.find((m) => m.sender === userId);
@@ -273,7 +241,7 @@ export function ReactionToggleButton({
         logger.error("Failed to send reaction", ex);
       } finally {
         setBusy(false);
-        hideReactionsMenu();
+        setShowReactionsMenu(false);
       }
     },
     [memberships, client, userId, rtcSession],
@@ -285,6 +253,7 @@ export function ReactionToggleButton({
         try {
           setBusy(true);
           await lowerHand();
+          setShowReactionsMenu(false);
         } finally {
           setBusy(false);
         }
@@ -313,7 +282,7 @@ export function ReactionToggleButton({
           logger.error("Failed to send reaction event", ex);
         } finally {
           setBusy(false);
-          hideReactionsMenu();
+          setShowReactionsMenu(false);
         }
       }
     };
@@ -332,17 +301,24 @@ export function ReactionToggleButton({
     <>
       <InnerButton
         disabled={busy}
-        onClick={showReactionsMenu}
-        raised={isHandRaised}
-        open={!!ref.current?.open}
-      />
-      <ReactionPopupMenu
-        ref={ref}
-        isHandRaised={isHandRaised}
-        canReact={canReact}
-        sendReaction={(reaction) => void sendRelation(reaction)}
-        toggleRaisedHand={toggleRaisedHand}
+        onClick={() => setShowReactionsMenu((show) => !show)}
+        raised={isHandRaised || showReactionsMenu}
+        open={showReactionsMenu}
       />
+      <Modal
+        open={showReactionsMenu}
+        title="Pick reaction"
+        hideHeader
+        className={styles.reactionPopupMenuModal}
+        onDismiss={() => setShowReactionsMenu(false)}
+      >
+        <ReactionPopupMenu
+          isHandRaised={isHandRaised}
+          canReact={canReact}
+          sendReaction={(reaction) => void sendRelation(reaction)}
+          toggleRaisedHand={toggleRaisedHand}
+        />
+      </Modal>
     </>
   );
 }
diff --git a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
index 34127b51..514e7f35 100644
--- a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
+++ b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
@@ -1,11 +1,42 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Can close menu 1`] = `
+exports[`Can close search 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-labelledby=":rg5:"
+    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can close search with the escape key 1`] = `
 <div>
   <button
     aria-disabled="false"
     aria-expanded="false"
-    aria-labelledby=":r1m:"
+    aria-labelledby=":rja:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="secondary"
     data-size="lg"
@@ -21,361 +52,25 @@ exports[`Can close menu 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
       />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`Can close search 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-expanded="true"
-    aria-labelledby=":rfg:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
-    data-kind="primary"
-    data-size="lg"
-    role="button"
-    tabindex="0"
-  >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
       <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
       />
     </svg>
   </button>
-  <div
-    class="reactionPopupMenu"
-  >
-    <section
-      class="handRaiseSection"
-    >
-      <button
-        aria-label="Toggle hand raised"
-        aria-labelledby=":rfm:"
-        aria-pressed="false"
-        class="_button_i91xf_17 reactionButton"
-        data-kind="secondary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        🖐️
-      </button>
-    </section>
-    <div
-      class="verticalSeperator"
-    />
-    <section>
-      <menu>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rh8:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👍
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rhd:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🎉
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rhi:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👏
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rhn:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐶
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rhs:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐱
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":ri1:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            💡
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-label="Open reactions search"
-            aria-labelledby=":ri6:"
-            class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-            data-kind="tertiary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
-              />
-            </svg>
-          </button>
-        </li>
-      </menu>
-    </section>
-  </div>
-</div>
-`;
-
-exports[`Can close search with the escape key 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-expanded="true"
-    aria-labelledby=":rii:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
-    data-kind="primary"
-    data-size="lg"
-    role="button"
-    tabindex="0"
-  >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
-      />
-    </svg>
-  </button>
-  <div
-    class="reactionPopupMenu"
-  >
-    <section
-      class="handRaiseSection"
-    >
-      <button
-        aria-label="Toggle hand raised"
-        aria-labelledby=":rio:"
-        aria-pressed="false"
-        class="_button_i91xf_17 reactionButton"
-        data-kind="secondary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        🖐️
-      </button>
-    </section>
-    <div
-      class="verticalSeperator"
-    />
-    <section>
-      <menu>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rka:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👍
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rkf:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🎉
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rkk:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👏
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rkp:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐶
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rku:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐱
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rl3:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            💡
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-label="Open reactions search"
-            aria-labelledby=":rl8:"
-            class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-            data-kind="tertiary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
-              />
-            </svg>
-          </button>
-        </li>
-      </menu>
-    </section>
-  </div>
 </div>
 `;
 
 exports[`Can lower hand 1`] = `
-<div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
   <button
     aria-disabled="true"
     aria-expanded="true"
-    aria-labelledby=":r52:"
+    aria-labelledby=":r5b:"
     class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
     data-size="lg"
@@ -395,154 +90,14 @@ exports[`Can lower hand 1`] = `
       />
     </svg>
   </button>
-  <div
-    class="reactionPopupMenu"
-  >
-    <section
-      class="handRaiseSection"
-    >
-      <button
-        aria-label="Toggle hand raised"
-        aria-labelledby=":r58:"
-        aria-pressed="true"
-        class="_button_i91xf_17 reactionButton"
-        data-kind="primary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        🖐️
-      </button>
-    </section>
-    <div
-      class="verticalSeperator"
-    />
-    <section>
-      <menu>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r5d:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👍
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r5i:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🎉
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r5n:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👏
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r5s:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐶
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r61:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐱
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r66:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            💡
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-label="Open reactions search"
-            aria-labelledby=":r6b:"
-            class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-            data-kind="tertiary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
-              />
-            </svg>
-          </button>
-        </li>
-      </menu>
-    </section>
-  </div>
 </div>
 `;
 
 exports[`Can open menu 1`] = `
-<div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
   <button
     aria-disabled="false"
     aria-expanded="true"
@@ -566,158 +121,18 @@ exports[`Can open menu 1`] = `
       />
     </svg>
   </button>
-  <div
-    class="reactionPopupMenu"
-  >
-    <section
-      class="handRaiseSection"
-    >
-      <button
-        aria-label="Toggle hand raised"
-        aria-labelledby=":r6:"
-        aria-pressed="false"
-        class="_button_i91xf_17 reactionButton"
-        data-kind="secondary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        🖐️
-      </button>
-    </section>
-    <div
-      class="verticalSeperator"
-    />
-    <section>
-      <menu>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rb:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👍
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rg:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🎉
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rl:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👏
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rq:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐶
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rv:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐱
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r14:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            💡
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-label="Open reactions search"
-            aria-labelledby=":r19:"
-            class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-            data-kind="tertiary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
-              />
-            </svg>
-          </button>
-        </li>
-      </menu>
-    </section>
-  </div>
 </div>
 `;
 
 exports[`Can raise hand 1`] = `
-<div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
   <button
     aria-disabled="true"
     aria-expanded="true"
-    aria-labelledby=":r3c:"
+    aria-labelledby=":r3i:"
     class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
     data-size="lg"
@@ -737,158 +152,18 @@ exports[`Can raise hand 1`] = `
       />
     </svg>
   </button>
-  <div
-    class="reactionPopupMenu"
-  >
-    <section
-      class="handRaiseSection"
-    >
-      <button
-        aria-label="Toggle hand raised"
-        aria-labelledby=":r3i:"
-        aria-pressed="false"
-        class="_button_i91xf_17 reactionButton"
-        data-kind="secondary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        🖐️
-      </button>
-    </section>
-    <div
-      class="verticalSeperator"
-    />
-    <section>
-      <menu>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r3n:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👍
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r3s:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🎉
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r41:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            👏
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r46:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐶
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r4b:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🐱
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":r4g:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            💡
-          </button>
-        </li>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-label="Open reactions search"
-            aria-labelledby=":r4l:"
-            class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-            data-kind="tertiary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
-              />
-            </svg>
-          </button>
-        </li>
-      </menu>
-    </section>
-  </div>
 </div>
 `;
 
 exports[`Can search for and send emoji 1`] = `
-<div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
   <button
     aria-disabled="false"
     aria-expanded="true"
-    aria-labelledby=":r8e:"
+    aria-labelledby=":r8t:"
     class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
     data-size="lg"
@@ -908,114 +183,18 @@ exports[`Can search for and send emoji 1`] = `
       />
     </svg>
   </button>
-  <div
-    class="reactionPopupMenu"
-  >
-    <section
-      class="handRaiseSection"
-    >
-      <button
-        aria-label="Toggle hand raised"
-        aria-labelledby=":r8k:"
-        aria-pressed="false"
-        class="_button_i91xf_17 reactionButton"
-        data-kind="secondary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        🖐️
-      </button>
-    </section>
-    <div
-      class="verticalSeperator"
-    />
-    <section>
-      <form
-        class="_root_dgy0u_24 searchForm"
-      >
-        <label
-          class="_label_dgy0u_67 _field_dgy0u_34 _search_qztja_17"
-          for=":ra4:"
-        >
-          <svg
-            class="_icon_qztja_46"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
-            />
-          </svg>
-          <input
-            class="_input_qztja_61"
-            id=":ra4:"
-            name="reactionSearch"
-            placeholder="Search reactions…"
-            required=""
-            type="search"
-            value="crickets"
-          />
-        </label>
-        <button
-          aria-label="close search"
-          class="_button_i91xf_17 _has-icon_i91xf_66 _destructive_i91xf_116"
-          data-kind="secondary"
-          data-size="sm"
-          role="button"
-          tabindex="0"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
-            />
-          </svg>
-        </button>
-      </form>
-      <div
-        class="_separator_144s5_17"
-        data-kind="primary"
-        data-orientation="horizontal"
-        role="separator"
-      />
-      <menu>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rag:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🦗
-          </button>
-        </li>
-      </menu>
-    </section>
-  </div>
 </div>
 `;
 
 exports[`Can search for and send emoji with the keyboard 1`] = `
-<div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
   <button
     aria-disabled="false"
     aria-expanded="true"
-    aria-labelledby=":rba:"
+    aria-labelledby=":rbs:"
     class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
     data-size="lg"
@@ -1035,104 +214,5 @@ exports[`Can search for and send emoji with the keyboard 1`] = `
       />
     </svg>
   </button>
-  <div
-    class="reactionPopupMenu"
-  >
-    <section
-      class="handRaiseSection"
-    >
-      <button
-        aria-label="Toggle hand raised"
-        aria-labelledby=":rbg:"
-        aria-pressed="false"
-        class="_button_i91xf_17 reactionButton"
-        data-kind="secondary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        🖐️
-      </button>
-    </section>
-    <div
-      class="verticalSeperator"
-    />
-    <section>
-      <form
-        class="_root_dgy0u_24 searchForm"
-      >
-        <label
-          class="_label_dgy0u_67 _field_dgy0u_34 _search_qztja_17"
-          for=":rd0:"
-        >
-          <svg
-            class="_icon_qztja_46"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
-            />
-          </svg>
-          <input
-            class="_input_qztja_61"
-            id=":rd0:"
-            name="reactionSearch"
-            placeholder="Search reactions…"
-            required=""
-            type="search"
-            value="crickets"
-          />
-        </label>
-        <button
-          aria-label="close search"
-          class="_button_i91xf_17 _has-icon_i91xf_66 _destructive_i91xf_116"
-          data-kind="secondary"
-          data-size="sm"
-          role="button"
-          tabindex="0"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
-            />
-          </svg>
-        </button>
-      </form>
-      <div
-        class="_separator_144s5_17"
-        data-kind="primary"
-        data-orientation="horizontal"
-        role="separator"
-      />
-      <menu>
-        <li
-          class="reactionPopupMenuItem"
-        >
-          <button
-            aria-disabled="false"
-            aria-labelledby=":rdc:"
-            class="_button_i91xf_17 reactionButton"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
-            🦗
-          </button>
-        </li>
-      </menu>
-    </section>
-  </div>
 </div>
 `;