From 09f618a66b6242025bcbf83f6d5241ed5c02ddc0 Mon Sep 17 00:00:00 2001
From: nickbar01234 <nickbar01234@gmail.com>
Date: Fri, 26 Apr 2024 02:16:12 -0400
Subject: [PATCH] Fix styling nits

---
 src/app/private/admin/home/chapters/page.tsx  |  1 +
 src/components/AdminHomePage.tsx              |  2 +-
 src/components/ChapterRequest.tsx             |  2 +-
 .../container/DropDownContainer.tsx           | 24 +++++++++++++------
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app/private/admin/home/chapters/page.tsx b/src/app/private/admin/home/chapters/page.tsx
index 95ad1703..99948df7 100644
--- a/src/app/private/admin/home/chapters/page.tsx
+++ b/src/app/private/admin/home/chapters/page.tsx
@@ -5,6 +5,7 @@ const AdminChaptersPage = async () => {
   const chapters = await prisma.chapter.findMany({
     include: {
       students: true,
+      chapterRequest: true,
     },
   });
 
diff --git a/src/components/AdminHomePage.tsx b/src/components/AdminHomePage.tsx
index a01e756e..89edabe2 100644
--- a/src/components/AdminHomePage.tsx
+++ b/src/components/AdminHomePage.tsx
@@ -80,7 +80,7 @@ const AdminHomePage = ({ chapters }: AdminHomePageProps) => {
               />
             }
             moreInformation={
-              <DropDownContainer>
+              <DropDownContainer defaultExpand={false}>
                 <ChapterRequest
                   chapterRequest={chapter.chapterRequest}
                   ContainerNode={({ children }) => (
diff --git a/src/components/ChapterRequest.tsx b/src/components/ChapterRequest.tsx
index bbd3ab37..bdc5e3e9 100644
--- a/src/components/ChapterRequest.tsx
+++ b/src/components/ChapterRequest.tsx
@@ -92,7 +92,7 @@ const ChapterRequest = (props: ChapterRequestProps) => {
             ))}
           </div>
         ) : (
-          <DropDownContainer defaultExpand={false}>
+          <DropDownContainer defaultExpand={false} elementsClassName="pt-4">
             <div className="flex flex-col gap-y-2">
               {qas.map((question) => (
                 <MoreInformation key={question.question} {...question} />
diff --git a/src/components/container/DropDownContainer.tsx b/src/components/container/DropDownContainer.tsx
index f6fe0f48..1fa98a17 100644
--- a/src/components/container/DropDownContainer.tsx
+++ b/src/components/container/DropDownContainer.tsx
@@ -5,7 +5,8 @@ import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface DropDownContainerProps {
-  classname?: string;
+  containerClassName?: string;
+  elementsClassName?: string;
   title?: React.ReactNode;
   children?: React.ReactNode;
   defaultExpand?: boolean;
@@ -13,13 +14,18 @@ interface DropDownContainerProps {
 
 const DropDownContainer = (props: DropDownContainerProps) => {
   const [showItems, setShowItems] = React.useState(props.defaultExpand ?? true);
+  const animationDivRef = React.useRef<HTMLDivElement>(null);
 
   const handleClick = () => {
     setShowItems(!showItems);
+    if (animationDivRef.current) {
+      // Prevent scroll bar from rendering
+      animationDivRef.current.style["overflow"] = "hidden";
+    }
   };
 
   return (
-    <div className={props.classname ?? ""}>
+    <div className={props.containerClassName ?? ""}>
       <div className="flex cursor-pointer" onClick={handleClick}>
         <div className="pr-2">
           <FontAwesomeIcon
@@ -34,16 +40,20 @@ const DropDownContainer = (props: DropDownContainerProps) => {
         )}
       </div>
       <div
-        className={`overflow-auto ${
-          showItems ? "h-fit max-h-[512px] pb-4 md:max-h-[1024px]" : "max-h-0"
+        ref={animationDivRef}
+        className={`overflow-hidden ${
+          showItems ? "max-h-[512px] md:max-h-[1024px]" : "max-h-0"
         }`}
         style={
           showItems
-            ? { transition: "max-height 0.3s ease" }
-            : { transition: "max-height 0.1s ease" }
+            ? { transition: "max-height 1s ease" }
+            : { transition: "max-height 0.3 ease" }
+        }
+        onTransitionEnd={(ref) =>
+          (ref.currentTarget.style["overflow"] = "auto")
         }
       >
-        {props.children}
+        <div className={props.elementsClassName ?? ""}>{props.children}</div>
       </div>
     </div>
   );