Skip to content

Fix "Expand map" tooltip overlapping message composer#33679

Open
Tamajit-005 wants to merge 2 commits into
element-hq:developfrom
Tamajit-005:fix/location-tooltip-overlap
Open

Fix "Expand map" tooltip overlapping message composer#33679
Tamajit-005 wants to merge 2 commits into
element-hq:developfrom
Tamajit-005:fix/location-tooltip-overlap

Conversation

@Tamajit-005
Copy link
Copy Markdown

Fixes #21619

Summary

The "Expand map" tooltip on location messages was rendered through a FloatingPortal, allowing it to overlap UI elements outside the visible message panel, including the message composer while scrolling.

The existing compound-web <Tooltip> component does not expose the Floating UI middleware required to implement boundary-aware positioning and visibility behavior.

This change replaces the tooltip with a custom BoundaryAwareTooltip built on @floating-ui/react that:

  • Flips above the map when there is insufficient space below it
  • Hides when it escapes the visible message panel boundary

Before

Screenshot from 2026-05-30 18-11-11

The tooltip remains visible and can overlap the message composer when the timeline is scrolled.

After

Screenshot from 2026-05-30 18-14-07

The tooltip flips above the map when space below becomes constrained and becomes hidden when it escapes the visible message panel boundary.

Demonstration

Screencast.from.2026-05-30.18-15-20.mp4

A short screen recording is attached to demonstrate the scrolling behavior, tooltip flipping, and boundary-aware hiding. The issue and fix are easier to observe in motion than through static screenshots.

Testing

  1. Open a room containing a location message
  2. Hover over the map and verify the "Expand map" tooltip appears
  3. Scroll down so the map approaches the message composer
  4. Verify the tooltip flips above the map instead of overlapping the composer
  5. Continue scrolling until the tooltip would escape the visible message panel boundary
  6. Verify the tooltip becomes hidden
  7. Run:
cd apps/web
pnpm exec jest --no-coverage test/unit-tests/components/views/messages/MLocationBody-test.tsx

Expected result:

  • 6 tests pass
  • 4 snapshots pass

Notes

  • Adds @floating-ui/react as a direct dependency (previously only available transitively through @vector-im/compound-web)
  • Includes a separate commit adding matrix-js-sdk to Jest's transformIgnorePatterns
  • The Jest change addresses a pre-existing test infrastructure issue encountered while running the location message test suite and is intentionally isolated from the feature change for easier review

Checklist

matrix-js-sdk ships raw TypeScript source, but was excluded from
Jest's transform allowlist, causing SyntaxError in test runs.
Replace compound-web Tooltip with a custom FloatingUI implementation
that flips above the map near the composer and hides when outside the
visible room boundary.
@Tamajit-005 Tamajit-005 requested review from a team as code owners May 30, 2026 13:20
@Tamajit-005 Tamajit-005 requested review from dbkr and t3chguy May 30, 2026 13:20
@github-actions github-actions Bot added the Z-Community-PR Issue is solved by a community member's PR label May 30, 2026
@Tamajit-005
Copy link
Copy Markdown
Author

The CI Preview Changelog check is failing because this PR needs a T-Defect label. Could a maintainer add it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Z-Community-PR Issue is solved by a community member's PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MLocationBody 'Expand map' z-index stacks over message composer

1 participant