fix scrolling

This commit is contained in:
Pas 2025-08-03 13:33:50 -06:00
parent 7cafab767e
commit 68407d7dad
2 changed files with 15 additions and 2 deletions

View file

@ -111,7 +111,7 @@ export function ListView({
return ( return (
<div <div
key={notification.guid} key={notification.guid}
className={`p-4 rounded-lg border transition-all cursor-pointer hover:bg-background-main/50 mr-2 ${ className={`p-4 rounded-lg border transition-all cursor-pointer hover:bg-background-main/50 md:mr-2 ${
isRead isRead
? "bg-background-main border-utils-divider opacity-75" ? "bg-background-main border-utils-divider opacity-75"
: "bg-background-main border-type-link/70 shadow-sm" : "bg-background-main border-type-link/70 shadow-sm"

View file

@ -310,7 +310,20 @@ export function NotificationModal({ id }: NotificationModalProps) {
lastReadIndex lastReadIndex
] as HTMLElement; ] as HTMLElement;
if (element) { if (element) {
element.scrollIntoView({ behavior: "smooth", block: "center" }); // Use scrollTop instead of scrollIntoView to avoid scrolling the modal container
const container = containerRef.current;
const elementTop = element.offsetTop;
const containerHeight = container.clientHeight;
const elementHeight = element.clientHeight;
// Calculate the scroll position to center the element
const scrollTop =
elementTop - containerHeight / 2 + elementHeight / 2;
container.scrollTo({
top: Math.max(0, scrollTop),
behavior: "smooth",
});
} }
} }
} }