diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index db8d4b306..006584e8d 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -9,7 +9,6 @@ import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
 import RelativeTimestamp from './relative-timestamp';
-import StopPropagation from './stop-propagation';
 import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
@@ -22,6 +21,8 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
   const history = useHistory();
 
   const handleClick: React.MouseEventHandler = (e) => {
+    e.stopPropagation();
+
     const timelineUrl = `/timeline/${account.domain}`;
     if (!(e.ctrlKey || e.metaKey)) {
       history.push(timelineUrl);
@@ -166,100 +167,106 @@ const Account = ({
   const LinkEl: any = withLinkToProfile ? Link : 'div';
 
   return (
-    <StopPropagation>
-      <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
-        <HStack alignItems={actionAlignment} justifyContent='between'>
-          <HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
+    <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
+      <HStack alignItems={actionAlignment} justifyContent='between'>
+        <HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
+          <ProfilePopper
+            condition={showProfileHoverCard}
+            wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
+          >
+            <LinkEl
+              to={`/@${account.acct}`}
+              title={account.acct}
+              onClick={(event: React.MouseEvent) => event.stopPropagation()}
+            >
+              <Avatar src={account.avatar} size={avatarSize} />
+              {emoji && (
+                <Emoji
+                  className='w-5 h-5 absolute -bottom-1.5 -right-1.5'
+                  emoji={emoji}
+                />
+              )}
+            </LinkEl>
+          </ProfilePopper>
+
+          <div className='flex-grow'>
             <ProfilePopper
               condition={showProfileHoverCard}
-              wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
+              wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
             >
-              <LinkEl to={`/@${account.acct}`} title={account.acct}>
-                <Avatar src={account.avatar} size={avatarSize} />
-                {emoji && (
-                  <Emoji
-                    className='w-5 h-5 absolute -bottom-1.5 -right-1.5'
-                    emoji={emoji}
+              <LinkEl
+                to={`/@${account.acct}`}
+                title={account.acct}
+                onClick={(event: React.MouseEvent) => event.stopPropagation()}
+              >
+                <div className='flex items-center space-x-1 flex-grow' style={style}>
+                  <Text
+                    size='sm'
+                    weight='semibold'
+                    truncate
+                    dangerouslySetInnerHTML={{ __html: account.display_name_html }}
                   />
-                )}
+
+                  {account.verified && <VerificationBadge />}
+                </div>
               </LinkEl>
             </ProfilePopper>
 
-            <div className='flex-grow'>
-              <ProfilePopper
-                condition={showProfileHoverCard}
-                wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
-              >
-                <LinkEl to={`/@${account.acct}`} title={account.acct}>
-                  <div className='flex items-center space-x-1 flex-grow' style={style}>
-                    <Text
-                      size='sm'
-                      weight='semibold'
-                      truncate
-                      dangerouslySetInnerHTML={{ __html: account.display_name_html }}
-                    />
-
-                    {account.verified && <VerificationBadge />}
-                  </div>
-                </LinkEl>
-              </ProfilePopper>
-
-              <Stack space={withAccountNote ? 1 : 0}>
-                <HStack alignItems='center' space={1} style={style}>
-                  <Text theme='muted' size='sm' truncate>@{username}</Text>
-
-                  {account.favicon && (
-                    <InstanceFavicon account={account} />
-                  )}
-
-                  {(timestamp) ? (
-                    <>
-                      <Text tag='span' theme='muted' size='sm'>&middot;</Text>
-
-                      {timestampUrl ? (
-                        <Link to={timestampUrl} className='hover:underline'>
-                          <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
-                        </Link>
-                      ) : (
-                        <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
-                      )}
-                    </>
-                  ) : null}
-
-                  {showEdit ? (
-                    <>
-                      <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+            <Stack space={withAccountNote ? 1 : 0}>
+              <HStack alignItems='center' space={1} style={style}>
+                <Text theme='muted' size='sm' truncate>@{username}</Text>
 
-                      <Icon className='h-5 w-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/pencil.svg')} />
-                    </>
-                  ) : null}
-
-                  {actionType === 'muting' && account.mute_expires_at ? (
-                    <>
-                      <Text tag='span' theme='muted' size='sm'>&middot;</Text>
-
-                      <Text theme='muted' size='sm'><RelativeTimestamp timestamp={account.mute_expires_at} futureDate /></Text>
-                    </>
-                  ) : null}
-                </HStack>
-
-                {withAccountNote && (
-                  <Text
-                    size='sm'
-                    dangerouslySetInnerHTML={{ __html: account.note_emojified }}
-                    className='mr-2'
-                  />
+                {account.favicon && (
+                  <InstanceFavicon account={account} />
                 )}
-              </Stack>
-            </div>
-          </HStack>
 
-          <div ref={actionRef}>
-            {withRelationship ? renderAction() : null}
+                {(timestamp) ? (
+                  <>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+
+                    {timestampUrl ? (
+                      <Link to={timestampUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
+                        <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
+                      </Link>
+                    ) : (
+                      <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
+                    )}
+                  </>
+                ) : null}
+
+                {showEdit ? (
+                  <>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+
+                    <Icon className='h-5 w-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/pencil.svg')} />
+                  </>
+                ) : null}
+
+                {actionType === 'muting' && account.mute_expires_at ? (
+                  <>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+
+                    <Text theme='muted' size='sm'><RelativeTimestamp timestamp={account.mute_expires_at} futureDate /></Text>
+                  </>
+                ) : null}
+              </HStack>
+
+              {withAccountNote && (
+                <Text
+                  size='sm'
+                  dangerouslySetInnerHTML={{ __html: account.note_emojified }}
+                  className='mr-2'
+                />
+              )}
+            </Stack>
           </div>
         </HStack>
-      </div>
-    </StopPropagation>
+
+        <div ref={actionRef}>
+          {withRelationship ? renderAction() : null}
+        </div>
+      </HStack>
+    </div>
   );
 };
 
diff --git a/app/soapbox/components/polls/poll.tsx b/app/soapbox/components/polls/poll.tsx
index 2df985b7e..2b6f99392 100644
--- a/app/soapbox/components/polls/poll.tsx
+++ b/app/soapbox/components/polls/poll.tsx
@@ -5,7 +5,6 @@ import { openModal } from 'soapbox/actions/modals';
 import { vote } from 'soapbox/actions/polls';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
-import StopPropagation from '../stop-propagation';
 import { Stack, Text } from '../ui';
 
 import PollFooter from './poll-footer';
@@ -65,7 +64,8 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
   const showResults = poll.voted || poll.expired;
 
   return (
-    <StopPropagation>
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onClick={e => e.stopPropagation()}>
       {!showResults && poll.multiple && (
         <Text theme='muted' size='sm'>
           {intl.formatMessage(messages.multiple)}
@@ -93,7 +93,7 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
           selected={selected}
         />
       </Stack>
-    </StopPropagation>
+    </div>
   );
 };
 
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index 925f2115e..2c976bf86 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -13,7 +13,6 @@ import OutlineBox from './outline-box';
 import StatusContent from './status-content';
 import StatusReplyMentions from './status-reply-mentions';
 import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
-import StopPropagation from './stop-propagation';
 
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -92,60 +91,58 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   }
 
   return (
-    <StopPropagation>
-      <OutlineBox
-        data-testid='quoted-status'
-        className={classNames('cursor-pointer', {
-          'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
-        })}
+    <OutlineBox
+      data-testid='quoted-status'
+      className={classNames('cursor-pointer', {
+        'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
+      })}
+    >
+      <Stack
+        space={2}
+        onClick={handleExpandClick}
       >
+        <AccountContainer
+          {...actions}
+          id={account.id}
+          timestamp={status.created_at}
+          withRelationship={false}
+          showProfileHoverCard={!compose}
+          withLinkToProfile={!compose}
+        />
+
+        <StatusReplyMentions status={status} hoverable={false} />
+
         <Stack
-          space={2}
-          onClick={handleExpandClick}
+          className='relative z-0'
+          style={{ minHeight: status.hidden ? Math.max(minHeight, 208) + 12 : undefined }}
         >
-          <AccountContainer
-            {...actions}
-            id={account.id}
-            timestamp={status.created_at}
-            withRelationship={false}
-            showProfileHoverCard={!compose}
-            withLinkToProfile={!compose}
-          />
-
-          <StatusReplyMentions status={status} hoverable={false} />
-
-          <Stack
-            className='relative z-0'
-            style={{ minHeight: status.hidden ? Math.max(minHeight, 208) + 12 : undefined }}
-          >
-            {(status.hidden) && (
-              <SensitiveContentOverlay
+          {(status.hidden) && (
+            <SensitiveContentOverlay
+              status={status}
+              visible={showMedia}
+              onToggleVisibility={handleToggleMediaVisibility}
+              ref={overlay}
+            />
+          )}
+
+          <Stack space={4}>
+            <StatusContent
+              status={status}
+              collapsable
+            />
+
+            {(status.card || status.media_attachments.size > 0) && (
+              <StatusMedia
                 status={status}
-                visible={showMedia}
+                muted={compose}
+                showMedia={showMedia}
                 onToggleVisibility={handleToggleMediaVisibility}
-                ref={overlay}
               />
             )}
-
-            <Stack space={4}>
-              <StatusContent
-                status={status}
-                collapsable
-              />
-
-              {(status.card || status.media_attachments.size > 0) && (
-                <StatusMedia
-                  status={status}
-                  muted={compose}
-                  showMedia={showMedia}
-                  onToggleVisibility={handleToggleMediaVisibility}
-                />
-              )}
-            </Stack>
           </Stack>
         </Stack>
-      </OutlineBox>
-    </StopPropagation>
+      </Stack>
+    </OutlineBox>
   );
 };
 
diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 54c181c71..6735c1b29 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -530,8 +530,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         justifyContent={space === 'expand' ? 'between' : undefined}
         space={space === 'compact' ? 2 : undefined}
         grow={space === 'expand'}
-        onMouseUp={e => e.stopPropagation()}
-        onMouseDown={e => e.stopPropagation()}
         onClick={e => e.stopPropagation()}
       >
         <StatusActionButton
diff --git a/app/soapbox/components/status-content.tsx b/app/soapbox/components/status-content.tsx
index 6bfbb8e18..df35a90ac 100644
--- a/app/soapbox/components/status-content.tsx
+++ b/app/soapbox/components/status-content.tsx
@@ -12,7 +12,6 @@ import { isRtl } from '../rtl';
 
 import Markup from './markup';
 import Poll from './polls/poll';
-import StopPropagation from './stop-propagation';
 
 import type { Status, Mention } from 'soapbox/types/entities';
 
@@ -25,12 +24,10 @@ interface IReadMoreButton {
 
 /** Button to expand a truncated status (due to too much content) */
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
-  <StopPropagation>
-    <button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
-      <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-      <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
-    </button>
-  </StopPropagation>
+  <button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
+    <FormattedMessage id='status.read_more' defaultMessage='Read more' />
+    <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
+  </button>
 );
 
 interface IStatusContent {
@@ -100,10 +97,6 @@ const StatusContent: React.FC<IStatusContent> = ({ status, onClick, collapsable
         link.setAttribute('title', link.href);
         link.addEventListener('click', onLinkClick.bind(link), false);
       }
-
-      // Prevent bubbling
-      link.addEventListener('mouseup', e => e.stopPropagation());
-      link.addEventListener('mousedown', e => e.stopPropagation());
     });
   };
 
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index f3d418d30..3dc625c4d 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import StopPropagation from 'soapbox/components/stop-propagation';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
 import Card from 'soapbox/features/status/components/card';
 import Bundle from 'soapbox/features/ui/components/bundle';
@@ -176,9 +175,10 @@ const StatusMedia: React.FC<IStatusMedia> = ({
 
   if (media) {
     return (
-      <StopPropagation>
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div onClick={e => e.stopPropagation()}>
         {media}
-      </StopPropagation>
+      </div>
     );
   } else {
     return null;
diff --git a/app/soapbox/components/status-reply-mentions.tsx b/app/soapbox/components/status-reply-mentions.tsx
index 3adde6b65..0964c84ae 100644
--- a/app/soapbox/components/status-reply-mentions.tsx
+++ b/app/soapbox/components/status-reply-mentions.tsx
@@ -5,7 +5,6 @@ import { Link } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper';
-import StopPropagation from 'soapbox/components/stop-propagation';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Account, Status } from 'soapbox/types/entities';
@@ -19,6 +18,8 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   const dispatch = useAppDispatch();
 
   const handleOpenMentionsModal: React.MouseEventHandler<HTMLSpanElement> = (e) => {
+    e.stopPropagation();
+
     const account = status.account as Account;
 
     dispatch(openModal('MENTIONS', {
@@ -49,7 +50,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   // The typical case with a reply-to and a list of mentions.
   const accounts = to.slice(0, 2).map(account => {
     const link = (
-      <Link to={`/@${account.acct}`} className='reply-mentions__account'>@{account.username}</Link>
+      <Link to={`/@${account.acct}`} className='reply-mentions__account' onClick={(e) => e.stopPropagation()}>@{account.username}</Link>
     );
 
     if (hoverable) {
@@ -72,34 +73,32 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   }
 
   return (
-    <StopPropagation>
-      <div className='reply-mentions'>
-        <FormattedMessage
-          id='reply_mentions.reply.hoverable'
-          defaultMessage='<hover>Replying to</hover> {accounts}'
-          values={{
-            accounts: <FormattedList type='conjunction' value={accounts} />,
-            hover: (children: React.ReactNode) => {
-              if (hoverable) {
-                return (
-                  <HoverStatusWrapper statusId={status.in_reply_to_id} inline>
-                    <span
-                      key='hoverstatus'
-                      className='hover:underline cursor-pointer'
-                      role='presentation'
-                    >
-                      {children}
-                    </span>
-                  </HoverStatusWrapper>
-                );
-              } else {
-                return children;
-              }
-            },
-          }}
-        />
-      </div>
-    </StopPropagation>
+    <div className='reply-mentions'>
+      <FormattedMessage
+        id='reply_mentions.reply.hoverable'
+        defaultMessage='<hover>Replying to</hover> {accounts}'
+        values={{
+          accounts: <FormattedList type='conjunction' value={accounts} />,
+          hover: (children: React.ReactNode) => {
+            if (hoverable) {
+              return (
+                <HoverStatusWrapper statusId={status.in_reply_to_id} inline>
+                  <span
+                    key='hoverstatus'
+                    className='hover:underline cursor-pointer'
+                    role='presentation'
+                  >
+                    {children}
+                  </span>
+                </HoverStatusWrapper>
+              );
+            } else {
+              return children;
+            }
+          },
+        }}
+      />
+    </div>
   );
 };
 
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 31af2cbaa..2d31f6fc1 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -235,8 +235,7 @@ const Status: React.FC<IStatus> = (props) => {
     reblogElement = (
       <NavLink
         to={`/@${status.getIn(['account', 'acct'])}`}
-        onClick={e => e.stopPropagation()}
-        onMouseUp={e => e.stopPropagation()}
+        onClick={(event) => event.stopPropagation()}
         className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
       >
         <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
@@ -259,8 +258,7 @@ const Status: React.FC<IStatus> = (props) => {
       <div className='pb-5 -mt-2 sm:hidden truncate'>
         <NavLink
           to={`/@${status.getIn(['account', 'acct'])}`}
-          onClick={e => e.stopPropagation()}
-          onMouseUp={e => e.stopPropagation()}
+          onClick={(event) => event.stopPropagation()}
           className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
         >
           <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
@@ -328,7 +326,7 @@ const Status: React.FC<IStatus> = (props) => {
         data-featured={featured ? 'true' : null}
         aria-label={textForScreenReader(intl, actualStatus, rebloggedByText)}
         ref={node}
-        onMouseUp={handleClick}
+        onClick={handleClick}
         role='link'
       >
         {featured && (
diff --git a/app/soapbox/components/statuses/sensitive-content-overlay.tsx b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
index 21411bf5c..59faef161 100644
--- a/app/soapbox/components/statuses/sensitive-content-overlay.tsx
+++ b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
 
-import StopPropagation from '../stop-propagation';
 import { Button, HStack, Text } from '../ui';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
@@ -39,7 +38,9 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
 
   const [visible, setVisible] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
 
-  const toggleVisibility = () => {
+  const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+
     if (onToggleVisibility) {
       onToggleVisibility();
     } else {
@@ -63,15 +64,13 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       data-testid='sensitive-overlay'
     >
       {visible ? (
-        <StopPropagation>
-          <Button
-            text={intl.formatMessage(messages.hide)}
-            icon={require('@tabler/icons/eye-off.svg')}
-            onClick={toggleVisibility}
-            theme='primary'
-            size='sm'
-          />
-        </StopPropagation>
+        <Button
+          text={intl.formatMessage(messages.hide)}
+          icon={require('@tabler/icons/eye-off.svg')}
+          onClick={toggleVisibility}
+          theme='primary'
+          size='sm'
+        />
       ) : (
         <div className='text-center w-3/4 mx-auto space-y-4' ref={ref}>
           <div className='space-y-1'>
@@ -93,34 +92,36 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
           </div>
 
           <HStack alignItems='center' justifyContent='center' space={2}>
-            <StopPropagation>
-              {isUnderReview ? (
-                <>
-                  {links.get('support') && (
-                    <a href={links.get('support')} target='_blank'>
-                      <Button
-                        type='button'
-                        theme='outline'
-                        size='sm'
-                        icon={require('@tabler/icons/headset.svg')}
-                      >
-                        {intl.formatMessage(messages.contact)}
-                      </Button>
-                    </a>
-                  )}
-                </>
-              ) : null}
-
-              <Button
-                type='button'
-                theme='outline'
-                size='sm'
-                icon={require('@tabler/icons/eye.svg')}
-                onClick={toggleVisibility}
-              >
-                {intl.formatMessage(messages.show)}
-              </Button>
-            </StopPropagation>
+            {isUnderReview ? (
+              <>
+                {links.get('support') && (
+                  <a
+                    href={links.get('support')}
+                    target='_blank'
+                    onClick={(event) => event.stopPropagation()}
+                  >
+                    <Button
+                      type='button'
+                      theme='outline'
+                      size='sm'
+                      icon={require('@tabler/icons/headset.svg')}
+                    >
+                      {intl.formatMessage(messages.contact)}
+                    </Button>
+                  </a>
+                )}
+              </>
+            ) : null}
+
+            <Button
+              type='button'
+              theme='outline'
+              size='sm'
+              icon={require('@tabler/icons/eye.svg')}
+              onClick={toggleVisibility}
+            >
+              {intl.formatMessage(messages.show)}
+            </Button>
           </HStack>
         </div>
       )}
diff --git a/app/soapbox/components/stop-propagation.tsx b/app/soapbox/components/stop-propagation.tsx
deleted file mode 100644
index f8eff7b4e..000000000
--- a/app/soapbox/components/stop-propagation.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-interface IStopPropagation {
-  /** Children to render within the bubble. */
-  children: React.ReactNode,
-  /** Whether to prevent mouse events from bubbling. (default: `true`) */
-  enabled?: boolean,
-}
-
-/**
- * Prevent mouse events from bubbling up.
- *
- * Why is this needed? Because `onClick`, `onMouseDown`, and `onMouseUp` are 3 separate events.
- * To prevent a lot of code duplication, this component can stop all mouse events.
- * Plus, placing it in the component tree makes it more readable.
- */
-const StopPropagation: React.FC<IStopPropagation> = ({ children, enabled = true }) => {
-
-  const handler: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    if (enabled) {
-      e.stopPropagation();
-    }
-  };
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div onClick={handler} onMouseDown={handler} onMouseUp={handler}>
-      {children}
-    </div>
-  );
-};
-
-export default StopPropagation;
\ No newline at end of file
diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index 7c40a4a14..07c778fd2 100644
--- a/app/soapbox/components/translate-button.tsx
+++ b/app/soapbox/components/translate-button.tsx
@@ -4,7 +4,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 
-import StopPropagation from './stop-propagation';
 import { Stack } from './ui';
 
 import type { Status } from 'soapbox/types/entities';
@@ -43,21 +42,17 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
       <Stack className='text-gray-700 dark:text-gray-600 text-sm' alignItems='start'>
         <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
 
-        <StopPropagation>
-          <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue hover:underline' onClick={handleTranslate}>
-            <FormattedMessage id='status.show_original' defaultMessage='Show original' />
-          </button>
-        </StopPropagation>
+        <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue hover:underline' onClick={handleTranslate}>
+          <FormattedMessage id='status.show_original' defaultMessage='Show original' />
+        </button>
       </Stack>
     );
   }
 
   return (
-    <StopPropagation>
-      <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-left text-sm hover:underline' onClick={handleTranslate}>
-        <FormattedMessage id='status.translate' defaultMessage='Translate' />
-      </button>
-    </StopPropagation>
+    <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-left text-sm hover:underline' onClick={handleTranslate}>
+      <FormattedMessage id='status.translate' defaultMessage='Translate' />
+    </button>
   );
 };
 
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index 1b0528efb..97de8862b 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -8,7 +8,7 @@ import { useButtonStyles } from './useButtonStyles';
 
 import type { ButtonSizes, ButtonThemes } from './useButtonStyles';
 
-interface IButton extends Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseUp'> {
+interface IButton {
   /** Whether this button expands the width of its container. */
   block?: boolean,
   /** Elements inside the <button> */
@@ -19,6 +19,8 @@ interface IButton extends Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick
   disabled?: boolean,
   /** URL to an SVG icon to render inside the button. */
   icon?: string,
+  /** Action when the button is clicked. */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void,
   /** A predefined button size. */
   size?: ButtonSizes,
   /** Text inside the button. Takes precedence over `children`. */
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index 817495187..996ccd64d 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -27,7 +27,7 @@ const spaces = {
   8: 'space-x-8',
 };
 
-interface IHStack extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseUp' | 'onMouseDown'> {
+interface IHStack extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
   /** Vertical alignment of children. */
   alignItems?: keyof typeof alignItemsOptions
   /** Extra class names on the <div> element. */
diff --git a/app/soapbox/features/audio/index.tsx b/app/soapbox/features/audio/index.tsx
index 0bef3c3d9..ecbae5b16 100644
--- a/app/soapbox/features/audio/index.tsx
+++ b/app/soapbox/features/audio/index.tsx
@@ -449,6 +449,7 @@ const Audio: React.FC<IAudio> = (props) => {
       onMouseLeave={handleMouseLeave}
       tabIndex={0}
       onKeyDown={handleKeyDown}
+      onClick={e => e.stopPropagation()}
     >
       <audio
         src={src}
diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index 4122727ab..0a9a3f297 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/app/soapbox/features/ui/components/profile-dropdown.tsx
@@ -58,12 +58,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
 
   const renderAccount = (account: AccountEntity) => {
     return (
-      <div className='relative'>
-        {/* HACK: The <Account> component stops click events, so insert this div as something to click. */}
-        <div className='absolute inset-0' />
-
-        <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} hideActions />
-      </div>
+      <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} hideActions />
     );
   };
 
diff --git a/app/soapbox/features/video/index.tsx b/app/soapbox/features/video/index.tsx
index 634d3e79a..f418714bd 100644
--- a/app/soapbox/features/video/index.tsx
+++ b/app/soapbox/features/video/index.tsx
@@ -183,6 +183,8 @@ const Video: React.FC<IVideo> = ({
     }
   }, [video.current]);
 
+  const handleClickRoot: React.MouseEventHandler = e => e.stopPropagation();
+
   const handlePlay = () => {
     setPaused(false);
   };
@@ -505,6 +507,7 @@ const Video: React.FC<IVideo> = ({
       ref={player}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onClick={handleClickRoot}
       onKeyDown={handleKeyDown}
       tabIndex={0}
     >