diff --git a/src/pages/message-screen.tsx b/src/pages/message-screen.tsx index d2311e7..eda3e42 100644 --- a/src/pages/message-screen.tsx +++ b/src/pages/message-screen.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from "react"; import { useMessage } from "../hooks/use-message"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; @@ -5,19 +6,40 @@ import remarkGfm from "remark-gfm"; export const MessageScreen = () => { const { data: message } = useMessage(); + const cardRef = useRef(null); + const [isOverflowing, setIsOverflowing] = useState(false); + + useEffect(() => { + const el = cardRef.current; + if (!el) return; + + const checkOverflow = () => { + setIsOverflowing(el.scrollHeight > el.clientHeight); + }; + + checkOverflow(); + window.addEventListener("resize", checkOverflow); + return () => window.removeEventListener("resize", checkOverflow); + }, [message?.body, message?.title]); return (
-
+

Hovedstyret taler!

{message?.title && (

{message.title}

)} -

+

{message?.body} -

+
+ {isOverflowing && ( +
...
+ )}
);