fix(search): keep preview centered on match + square room avatars#961
Merged
Conversation
Two fixes for the search result view: - Preview scroll drift: SearchContextView positioned the matched message with a one-shot scroll computed from the first, unsettled layout. As the target row and its neighbours grew (avatars, media, link previews), the target drifted out of view — the user had to scroll up to find the highlight. Replaced with a bounded rAF re-assert loop that recomputes the 1/3-down position until layout settles, bailing on any manual scroll. Keyed on the target (previewResult) rather than message count, so loading older context on scroll-to-top no longer snaps back to the match. - Room avatars in the results list rendered as circles. Route them through RoomAvatar so rooms are rounded-squares with a Hash fallback.
mremond
added a commit
that referenced
this pull request
Jul 10, 2026
#963) Follow-up to #961, which merged before this fix landed. #961 routed search room avatars through `RoomAvatar` (`shape="square"`), but `Avatar` hard-coded `rounded-xl` (12px) for *every* square size. On a 24px (`xs`) box a 12px radius equals half the side length — a full circle — so room avatars in search results and the command palette still rendered as circles at that size. This makes the square corner radius a **percentage** (`rounded-[28%]`). A percentage border-radius is relative to the element's own size, so a single value reads as the same rounded-square at every avatar size, rather than a fixed px radius whose corner/size ratio drifts (circle at 24px, barely rounded at 96px). This also makes room-avatar rounding consistent across the app. Verified `rounded-[28%]` compiles to `border-radius: 28%` in-app.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two fixes for the search result view.
Preview scroll drift. Clicking a search result opens the read-only preview pane, which runs its own scroll logic (it renders in
staticMode, souseMessageListScrollskips positioning). That logic was a one-shot scroll computed from the first, unsettled layout. As the target row and the rows above it sized asynchronously (avatars, media, link previews), the target drifted out of view — the highlight was applied correctly but landed above the fold, so the user had to scroll up to find it. Replaced with a bounded rAF re-assert loop (mirroring the live path's marker/pin loops) that recomputes the 1/3-down position until layout settles, then stops, bailing the moment the user scrolls. Keyed on the target (previewResult) instead of message count, so loading older context on scroll-to-top no longer snaps back to the match.Room avatars in the results list rendered as circles. Routed room results through
RoomAvatarso they're rounded-squares with a Hash fallback, matching the rest of the app.Note: the scroll path is rAF/layout-driven and can't be exercised in the headless preview (zero-size window, frozen rAF).