feat: Enhance scrolling behavior and styles across components; add centralized scroll utilities

Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
2026-04-28 22:51:50 +10:00
parent e6af56a417
commit cad4852878
8 changed files with 151 additions and 61 deletions

View File

@@ -96,7 +96,7 @@ import {
} from '../../utils/matrix';
import { GetContentCallback, MessageEvent } from '../../../types/matrix/room';
import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
import { scrollToBottom } from '../../utils/dom';
import { autoScrollToBottom, scrollElementIntoView } from '../../utils/dom';
type ThreadViewProps = {
room: Room;
@@ -406,7 +406,7 @@ export function ThreadView({ room, threadRootId }: ThreadViewProps) {
// Scroll to bottom on mount and when new events arrive.
useLayoutEffect(() => {
const el = scrollRef.current;
if (el) scrollToBottom(el);
if (el) autoScrollToBottom(el);
}, [events.length]);
const handleClose = useCallback(() => {
@@ -481,7 +481,7 @@ export function ThreadView({ room, threadRootId }: ThreadViewProps) {
const el = scrollRef.current?.querySelector(
`[data-message-id="${targetId}"]`
) as HTMLElement | null;
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
if (el) scrollElementIntoView(el, { behavior: 'smooth', block: 'center' });
}, []);
const handleReactionToggle = useCallback(