Adjust overlap, clarify intent of consts

src/components/Tooltip/const.ts

@@ -1,6 +1,6 @@
 import {atoms as a} from '#/alf'
 
+export const BUBBLE_MAX_WIDTH = 240
 export const ARROW_SIZE = 12
 export const ARROW_HALF_SIZE = ARROW_SIZE / 2
-export const ARROW_VISUAL_OFFSET = ARROW_SIZE / 3
 export const MIN_EDGE_SPACE = a.px_lg.paddingLeft

src/components/Tooltip/index.tsx

@@ -17,11 +17,17 @@ import {Portal} from '#/components/Portal'
 import {
   ARROW_HALF_SIZE,
   ARROW_SIZE,
-  ARROW_VISUAL_OFFSET,
+  BUBBLE_MAX_WIDTH,
   MIN_EDGE_SPACE,
 } from '#/components/Tooltip/const'
 import {Text} from '#/components/Typography'
 
+/**
+ * These are native specific values, not shared with web
+ */
+const ARROW_VISUAL_OFFSET = ARROW_SIZE / 1.25 // vibes-based, slightly off the target
+const BUBBLE_SHADOW_OFFSET = ARROW_SIZE / 3 // vibes-based, provide more shadow beneath tip
+
 type TooltipContextType = {
   position: 'top' | 'bottom'
   ready: boolean
@@ -313,7 +319,7 @@ function Bubble({
         a.absolute,
         a.align_start,
         {
-          width: 200,
+          width: BUBBLE_MAX_WIDTH,
           opacity: bubbleMeasurements ? 1 : 0,
           top: coords.top,
           left: coords.left,
@@ -359,9 +365,8 @@ function Bubble({
               shadowOpacity: 0.2,
               shadowOffset: {
                 width: 0,
-                // provide more shadow beneath tip
                 height:
-                  ARROW_VISUAL_OFFSET *
+                  BUBBLE_SHADOW_OFFSET *
                   (coords.computedPosition === 'bottom' ? -1 : 1),
               },
             },

src/components/Tooltip/index.web.tsx

@@ -6,7 +6,7 @@ import {atoms as a, flatten, select, useTheme} from '#/alf'
 import {transparentifyColor} from '#/alf/util/colorGeneration'
 import {
   ARROW_SIZE,
-  ARROW_VISUAL_OFFSET,
+  BUBBLE_MAX_WIDTH,
   MIN_EDGE_SPACE,
 } from '#/components/Tooltip/const'
 import {Text} from '#/components/Typography'
@@ -61,7 +61,7 @@ export function Content({
         className="radix-popover-content"
         aria-label={label}
         side={position}
-        sideOffset={(ARROW_SIZE / 3) * -1}
+        sideOffset={4}
         collisionPadding={MIN_EDGE_SPACE}
         style={flatten([
           a.rounded_sm,
@@ -73,18 +73,9 @@ export function Content({
           {
             minWidth: 'max-content',
             boxShadow: select(t.name, {
-              light: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor(
+              light: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
-                t.palette.black,
+              dark: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
-                0.2,
+              dim: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
-              )}`,
-              dark: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor(
-                t.palette.black,
-                0.2,
-              )}`,
-              dim: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor(
-                t.palette.black,
-                0.2,
-              )}`,
             }),
           },
         ])}>
@@ -97,7 +88,9 @@ export function Content({
             dim: t.atoms.bg_contrast_100.backgroundColor,
           })}
         />
-        <View style={[a.px_md, a.py_sm, {maxWidth: 200}]}>{children}</View>
+        <View style={[a.px_md, a.py_sm, {maxWidth: BUBBLE_MAX_WIDTH}]}>
+          {children}
+        </View>
       </Popover.Content>
     </Popover.Portal>
   )

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -213,16 +213,13 @@ let ProfileHeaderStandard = ({
 
               {hasSession && (
                 <>
-                  <Tooltip.Outer
+                  <Tooltip.Outer visible={visible} onVisibleChange={setVisible}>
-                    position="top"
-                    visible={visible}
-                    onVisibleChange={setVisible}>
                     <Tooltip.Target>
                       <MessageProfileButton profile={profile} />
                     </Tooltip.Target>
                     <Tooltip.TextBubble>
                       <Text>
-                        <Trans>Boop</Trans>
+                        <Trans>Get notified about new posts</Trans>
                       </Text>
                     </Tooltip.TextBubble>
                   </Tooltip.Outer>