Fix bubble interactivity

holium · Jul 23, 2023 · ace2dd8 · ace2dd8
1 parent 7f905da
commit ace2dd8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/lib/design-system/src/blocks/Bubble/Bubble.tsx b/lib/design-system/src/blocks/Bubble/Bubble.tsx
@@ -211,9 +211,9 @@ export const Bubble = ({
       >
         {!isOur && !isPrevGrouped && (
           <BubbleAuthor
+            id={id}
             style={{
               color: authorColorDisplay,
-              pointerEvents: 'none',
             }}
             authorColor={authorColor}
           >
@@ -222,24 +222,18 @@ export const Bubble = ({
         )}
         {forwardedFrom && (
           <Text.Custom
+            id={id}
             style={{
               color: 'rgba(var(--rlm-icon-rgba), 0.60)',
               fontSize: 11,
-              pointerEvents: 'none',
             }}
           >
             Forwarded from: {forwardedFrom}
           </Text.Custom>
         )}
-        <FragmentBlock style={{ pointerEvents: 'none' }}>
-          {fragments}
-        </FragmentBlock>
-        <BubbleFooter
-          height={footerHeight}
-          mt={1}
-          style={{ pointerEvents: 'none' }}
-        >
-          <Flex height="100%" flex={7} style={{ pointerEvents: 'auto' }}>
+        <FragmentBlock id={id}>{fragments}</FragmentBlock>
+        <BubbleFooter height={footerHeight} mt={1}>
+          <Flex height="100%" flex={7}>
             {((reactions && reactions.length > 0) || onReaction) && (
               <Reactions
                 isOur={isOur}
@@ -251,17 +245,21 @@ export const Bubble = ({
             )}
           </Flex>
           <Flex
+            id={id}
             flex={3}
             gap={4}
             alignItems="flex-end"
             justifyContent="flex-end"
             minWidth={minBubbleWidth}
             flexBasis={minBubbleWidth}
-            style={{ pointerEvents: 'none' }}
           >
             {error && (
               <Text.Custom
-                style={{ whiteSpace: 'nowrap', userSelect: 'none' }}
+                style={{
+                  whiteSpace: 'nowrap',
+                  userSelect: 'none',
+                  pointerEvents: 'none',
+                }}
                 textAlign="right"
                 display="inline-flex"
                 alignItems="flex-end"

diff --git a/lib/design-system/src/blocks/Bubble/renderFragment.tsx b/lib/design-system/src/blocks/Bubble/renderFragment.tsx
@@ -151,7 +151,7 @@ export const renderFragment = (
       if (linkType === 'media') {
         return (
           <MediaBlock
-            id={`media-${link}`}
+            id={id}
             mode="embed"
             variant="content"
             width={320}