diff --git a/src/components/Tooltip/const.ts b/src/components/Tooltip/const.ts
index 8f51a3e067..cad7e0106c 100644
--- a/src/components/Tooltip/const.ts
+++ b/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
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 6e434242bb..446cf18fc6 100644
--- a/src/components/Tooltip/index.tsx
+++ b/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),
},
},
diff --git a/src/components/Tooltip/index.web.tsx b/src/components/Tooltip/index.web.tsx
index 97330aa485..739a714cd4 100644
--- a/src/components/Tooltip/index.web.tsx
+++ b/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(
- 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,
- )}`,
+ light: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
+ dark: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
+ dim: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
}),
},
])}>
@@ -97,7 +88,9 @@ export function Content({
dim: t.atoms.bg_contrast_100.backgroundColor,
})}
/>
- {children}
+
+ {children}
+
)
diff --git a/src/screens/Profile/Header/ProfileHeaderStandard.tsx b/src/screens/Profile/Header/ProfileHeaderStandard.tsx
index 734a7365e7..fbacaa7423 100644
--- a/src/screens/Profile/Header/ProfileHeaderStandard.tsx
+++ b/src/screens/Profile/Header/ProfileHeaderStandard.tsx
@@ -213,16 +213,13 @@ let ProfileHeaderStandard = ({
{hasSession && (
<>
-
+
- Boop
+ Get notified about new posts