sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Fix map tooltip overlapping message composer (#33982)

Browse Source 
* Fix map tooltip overlapping message composer

* Simplify boundary element lookup with useMemo

* Fix formatting with oxfmt
This commit is contained in:
Tamajit-005
2026-07-06 08:11:00 +00:00
committed by GitHub
parent 96f7930aa1
commit 5b253647e8
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/views/messages/MLocationBody.tsx
+5 -2
View File
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; import React, { useMemo } from "react";
import { type MatrixEvent, ClientEvent, type ClientEventHandlerMap } from "matrix-js-sdk/src/matrix"; import { type MatrixEvent, ClientEvent, type ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
import { secureRandomString } from "matrix-js-sdk/src/randomstring"; import { secureRandomString } from "matrix-js-sdk/src/randomstring";
import { Tooltip } from "@vector-im/compound-web"; import { Tooltip } from "@vector-im/compound-web";
@@ -131,6 +131,9 @@ export const LocationBodyContent: React.FC<LocationBodyContentProps> = ({
onError, onError,
onClick, onClick,
}) => { }) => {
// Find the message panel boundary so the tooltip hides when it would overlap the composer
const boundaryEl = useMemo(() => document.querySelector<HTMLElement>(".mx_RoomView_messagePanel") ?? undefined, []);
// only pass member to marker when should render avatar marker // only pass member to marker when should render avatar marker
const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined; const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
const geoUri = locationEventGeoUri(mxEvent); const geoUri = locationEventGeoUri(mxEvent);
@@ -150,7 +153,7 @@ export const LocationBodyContent: React.FC<LocationBodyContentProps> = ({
return ( return (
<div className="mx_MLocationBody"> <div className="mx_MLocationBody">
<Tooltip label={tooltip}> <Tooltip label={tooltip} boundary={boundaryEl}>
<div className="mx_MLocationBody_map">{mapElement}</div> <div className="mx_MLocationBody_map">{mapElement}</div>
</Tooltip> </Tooltip>
</div> </div>