Skip to content

fix(web): refine image preview interactions#723

Merged
tiann merged 2 commits into
tiann:mainfrom
techotaku39:fix/web-image-preview-interactions
May 29, 2026
Merged

fix(web): refine image preview interactions#723
tiann merged 2 commits into
tiann:mainfrom
techotaku39:fix/web-image-preview-interactions

Conversation

@techotaku39
Copy link
Copy Markdown
Contributor

Summary

  • stop chat image preview taps/clicks from bubbling into the message row
  • allow closing the full-screen viewer by clicking the dark backdrop
  • avoid closing the viewer when clicking the image or releasing after a drag/zoom gesture

Reason

Follow-up to #715.

After testing the merged lightbox on desktop and mobile, the preview interaction needed a few refinements:

  • on mobile, tapping a chat image could trigger the message metadata footer instead of opening the preview
  • clicking the dark backdrop should close the viewer for easier dismissal
  • clicking the image itself, or releasing after dragging, should not close the viewer

This keeps the new backdrop-close behavior, but only treats it as a close action when the press starts and ends on the backdrop with minimal movement.

Test

  • npm exec -- bun run typecheck:web
  • Manual: mobile chat image tap opens preview without showing message metadata
  • Manual: desktop image click / drag release does not close preview
  • Manual: clicking dark backdrop closes preview

@tiann tiann force-pushed the fix/web-image-preview-interactions branch from 4bd9ae6 to 9ae4903 Compare May 29, 2026 02:23
Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Findings

  • [Major] Touch-end opens the image viewer after scroll gestures — onTouchEnd fires for touch sequences that are used to scroll the chat, so starting a vertical scroll on an image preview can still open the full-screen viewer. The chat viewport is scrollable (web/src/components/AssistantChat/HappyThread.tsx:697), and this new handler bypasses the browser's click-cancellation behavior for moved touches. Evidence: web/src/components/ImagePreview.tsx:223.

Summary

  • Review mode: initial
  • One mobile interaction regression found in the added preview open handler.

Testing

  • Not run (automation)

HAPI Bot

Comment thread web/src/components/ImagePreview.tsx Outdated
onMouseDown={stopEvent}
onTouchStart={stopEvent}
onClick={openViewer}
onTouchEnd={openViewer}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[MAJOR] onTouchEnd opens the lightbox for every touch sequence that ends on the preview, including vertical scrolls started on an image. The chat viewport is scrollable (web/src/components/AssistantChat/HappyThread.tsx:697), so on mobile a user trying to scroll past an image can still run this handler on touchend and open the full-screen viewer. Keep opening tied to the synthesized click, which is cancelled for moved touches and already stops propagation.

Suggested fix:

<button
    type="button"
    onPointerDown={stopEvent}
    onMouseDown={stopEvent}
    onTouchStart={stopEvent}
    onClick={openViewer}
    className={props.buttonClassName ?? 'group flex min-h-[18rem] w-full items-center justify-center overflow-auto rounded-md border border-[var(--app-border)] bg-[var(--app-code-bg)] p-3 text-left'}
    title="Click to zoom"
>

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Findings

  • None.

Summary

  • Review mode: follow-up after new commits
  • No issues found in the latest full diff. The previous bot finding around onTouchEnd was addressed by removing that handler.
  • Residual risk: interaction coverage is manual only for this component; no automated ImagePreview regression test found.

Testing

  • Not run (automation)

HAPI Bot

@tiann tiann merged commit 7457a8f into tiann:main May 29, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants