feat: fix height of modal and add scrollable content area

apps/web/src/views/public/board/CardModal.tsx

@@ -1,10 +1,13 @@
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
+import { useEffect, useRef, useState } from "react";
 import { HiXMark } from "react-icons/hi2";
 
 import { authClient } from "@kan/auth/client";
 
+import Badge from "~/components/Badge";
 import Editor from "~/components/Editor";
+import LabelIcon from "~/components/LabelIcon";
 import { useModal } from "~/providers/modal";
 import { api } from "~/utils/api";
 import ActivityList from "~/views/card/components/ActivityList";
@@ -21,6 +24,9 @@ export function CardModal({
   const router = useRouter();
   const { closeModal, isOpen } = useModal();
   const { data: session } = authClient.useSession();
+  const [showFade, setShowFade] = useState(false);
+  const [showTopFade, setShowTopFade] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   const { data, isLoading } = api.card.byId.useQuery(
     {
@@ -33,10 +39,32 @@ export function CardModal({
 
   const labels = data?.labels ?? [];
 
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5;
+    const isAtTop = scrollTop <= 5;
+
+    setShowFade(!isAtBottom);
+    setShowTopFade(!isAtTop);
+  };
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+
+    handleScroll();
+
+    scrollElement.addEventListener("scroll", handleScroll);
+    return () => scrollElement.removeEventListener("scroll", handleScroll);
+  }, [data]);
+
   return (
     <div className="flex h-full flex-1 flex-row">
       <div className="flex h-full w-full flex-col overflow-hidden">
-        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8">
+        <div className="h-full p-8">
+          <div className="mb-6">
             <div className="flex w-full items-center justify-between">
               <button
                 className="absolute right-[2rem] top-[2rem] rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
@@ -67,31 +95,30 @@ export function CardModal({
                 </div>
               ) : (
                 <>
-                <h1 className="font-medium leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+                  <h1 className="font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
                     {data?.title}
                   </h1>
                 </>
               )}
             </div>
-          <div className="mb-6">
+            {labels.length > 0 && (
+              <div className="mt-2">
                 {labels.map((label) => (
-              <div
+                  <Badge
                     key={label.publicId}
-                className="my-1 mr-1 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
+                    value={label.name}
-              >
+                    iconLeft={<LabelIcon colourCode={label.colourCode} />}
-                <svg
+                  />
-                  fill={label.colourCode ?? "#3730a3"}
-                  className="h-2 w-2"
-                  viewBox="0 0 6 6"
-                  aria-hidden="true"
-                >
-                  <circle cx={3} cy={3} r={3} />
-                </svg>
-                <div>{label.name}</div>
-              </div>
                 ))}
               </div>
+            )}
+          </div>
 
+          <div className="relative">
+            <div
+              ref={scrollRef}
+              className="h-full max-h-[425px] overflow-y-auto"
+            >
               {data?.description && (
                 <div className="mb-10 flex w-full max-w-2xl justify-between">
                   <div className="mt-2">
@@ -109,11 +136,20 @@ export function CardModal({
                       cardPublicId={cardPublicId}
                       activities={data?.activities ?? []}
                       isLoading={isLoading}
+                      isViewOnly={true}
                     />
                   )}
                 </div>
               </div>
             </div>
+            {showTopFade && (
+              <div className="pointer-events-none absolute left-0 right-0 top-0 h-6 bg-gradient-to-b from-white/80 to-transparent dark:from-dark-100/80" />
+            )}
+            {showFade && (
+              <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-white/80 to-transparent dark:from-dark-100/80" />
+            )}
+          </div>
+        </div>
       </div>
     </div>
   );