diff --git a/src/components/Claim/ClaimView.tsx b/src/components/Claim/ClaimView.tsx index 29ecff779..fe236250f 100644 --- a/src/components/Claim/ClaimView.tsx +++ b/src/components/Claim/ClaimView.tsx @@ -1,6 +1,5 @@ -import { Affix } from "antd"; -import { Grid, Typography} from "@mui/material" -import React, { useEffect, useState } from "react"; +import { Box ,Grid , Typography} from "@mui/material" +import React, { useEffect, useRef, useState } from "react"; import { ContentModelEnum, Roles, TargetModel } from "../../types/enums"; import MetricsOverview from "../Metrics/MetricsOverview"; @@ -19,6 +18,8 @@ import { currentUserRole } from "../../atoms/currentUser"; import { useAtom } from "jotai"; const ClaimView = ({ personality, claim, href, hideDescriptions }) => { + const [isAffixed, setIsAffixed] = useState(true); + const ref = useRef(null); const dispatch = useDispatch(); const { t } = useTranslation(); const [role] = useAtom(currentUserRole); @@ -42,6 +43,22 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => { } }, [claim, claimContent, dispatch, isImage, personality, t]); + useEffect(() => { + const handleScroll = () => { + if (!ref.current) return; + + const { bottom } = ref.current.getBoundingClientRect(); + const windowHeight = window.innerHeight; + + if (bottom > windowHeight) { + setIsAffixed(true); + } else { + setIsAffixed(false); + } + }; + window.addEventListener("scroll", handleScroll); + }, []); + return ( <> {(role === Roles.Admin || role === Roles.SuperAdmin) && ( @@ -71,7 +88,7 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => { style={{ paddingBottom: "15px" }} justifyContent="center" > - + { } /> - - { "claim:hideHighlightsButton" )} /> - + {sources.length > 0 && ( <>