fix(chat): replace hover bridge with padding to unblock desktop interactions (#885)

* fix(chat): replace hover bridge with padding to unblock desktop interactions

PR #826 removed pointer-events-none from the hover bridge div to fix
short user message revert button hover, but the transparent 44px
full-width bridge blocked all interactions (clicks, text selection)
with messages below it on Tauri desktop where the rendering difference
made the overlay consume pointer events across the entire message area.

Replacing the bridge div approach with pb-12 padding on the message
bubble container (max-w-[85%]) when sticky inline hover is active.
This extends the hover hit area downward within the bubble's own
padding, maintaining continuous hover path from bubble to action
buttons without any overlay that could block sibling elements.

The padding approach works because:
- The 48px bottom padding extends max-w-[85%]'s hover area to cover
  the gap between bubble bottom and the absolute-positioned buttons
- Hovering the padding counts as hovering group/user-shell (parent)
- No absolute-positioned invisible layer means nothing blocks the
  next message's interactive content

* fix(chat): reduce hover padding from pb-12 to pb-5 for tighter spacing
This commit is contained in:
jwcrystal
2026-04-11 23:27:47 +03:00
committed by GitHub
parent 5ea2fed0d3
commit b91a72c74b
@@ -990,7 +990,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
respectReducedMotion
>
<div className={cn('relative flex justify-end', !isMobile ? 'group/user-shell' : undefined)}>
<div className="max-w-[85%]">
<div className={cn('max-w-[85%]', showStickyInlineHoverRow ? 'pb-5' : undefined)}>
<div
style={{
backgroundColor: 'var(--chat-user-message-bg)',
@@ -1063,8 +1063,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
/>
) : null}
</div>
{showStickyInlineHoverRow ? <div aria-hidden="true" className="absolute left-0 right-0 top-full h-11" /> : null}
</div>
</div>
</FadeInOnReveal>
)
) : (