Fixed the scrolling. I used a 'paper-gallery' component but ideally itll all just be in the modify page section. Might just need to set a definite height based on the rest of the page

Author: ConnerWithAnE

web/src/components/paper-gallery.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { PaperData } from "../types/types";
+import PaperSliver from "./paper-sliver";
+
+type PaperGalleryProps = {
+    papers: PaperData[];
+};
+
+export default function PaperGallery({ papers }: PaperGalleryProps) {
+    const [paperAreaHeight, setPaperAreaHeight] = useState<number>(
+        window.innerHeight - 200 - 65
+    ); //Default? random number choice
+
+    const updateDimensions = () => {
+        setPaperAreaHeight(window.innerHeight - 200 - 65); // 200 for header, 65 for navbar
+    };
+
+    useEffect(() => {
+        // Set initial height and listen for resize events
+        updateDimensions();
+        window.addEventListener("resize", updateDimensions);
+
+        return () => {
+            // Cleanup event listener on unmount
+            window.removeEventListener("resize", updateDimensions);
+        };
+    }, []);
+
+    return (
+        <div
+            className="overflow-y-scroll"
+            style={{
+                height: paperAreaHeight - 30,
+                
+            }}
+        >
+            {papers.map((paper: PaperData, index: number) => (
+                <PaperSliver paper={paper} index={index} key={index} />
+            ))}
+        </div>
+    );
+}

web/src/components/paper-sliver.tsx

@@ -1,10 +1,9 @@
 import "../App.css";
-import { TempPaperData } from "../pages/ModifyPage";
 import { PaperData } from "../types/types";
 
 // TempPaperData is for testing only
 type PaperSliverProp = {
-    paper: TempPaperData;
+    paper: PaperData;
     index: number;
 };
 

web/src/components/nav-bar/search-bar.tsx web/src/components/search-bar.tsxweb/src/components/nav-bar/search-bar.tsx renamed to web/src/components/search-bar.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useState } from "react";
 import { HiSearch } from "react-icons/hi";
-import "../../App.css";
+import "../App.css";
 
 interface SearchBarProps {
     onSearch: (value: string) => void // Callback to send out search value

web/src/pages/ModifyPage.tsx

@@ -1,19 +1,15 @@
 import "../App.css";
 import { Card } from "@nextui-org/react";
-import SearchBar from "../components/nav-bar/search-bar";
+import SearchBar from "../components/search-bar";
 import { useEffect, useState } from "react";
 import { PaperData } from "../types/types";
 import PaperSliver from "../components/paper-sliver";
+import PaperGallery from "../components/paper-gallery";
+
 
-// For testing only. All instances of 'TempPaperData' will be replaced with 'PaperData'
-export type TempPaperData = {
-    id: number;
-    paper_name: string;
-    author: string[];
-};
 
 export default function ModifyPage() {
-    const [papers, setPapers] = useState<TempPaperData[]>([
+    const [papers, setPapers] = useState<PaperData[]>([
         {
             id: 1,
             paper_name:
@@ -26,8 +22,11 @@ export default function ModifyPage() {
                 "R. Ecoffet",
             ],
         },
+        
     ]);
 
+    const [paperAreaHeight, setPaperAreaHeight] = useState<number>();
+
     const fetchPapers = async (search: string) => {
         const token = localStorage.getItem("jwtToken");
 
@@ -67,18 +66,20 @@ export default function ModifyPage() {
         fetchPapers(value);
     };
 
+    
+
     return (
-        <div className="flex flex-col items-center justify-center">
+        <div className="flex flex-col items-center h-full">
             <div className="bg-[#F4F4F4] w-[70%]">
                 <div>
                     <div className="py-[4%] text-4xl">Modify Paper Data</div>
                     <SearchBar className="pb-4" onSearch={handleSearch} />
                     <div className="w-full h-8 bg-[#D4D4D4] drop-shadow-md"></div>
                 </div>
-                <div>
-                    {papers.map((paper: TempPaperData, index: number) => (
-                        <PaperSliver paper={paper} index={index} />
-                    ))}
+                <div className="">
+                    <div className="overflow-y-scroll max-h-screen">
+                        <PaperGallery papers={papers}/>
+                    </div>
                 </div>
             </div>
         </div>

web/src/types/types.ts

@@ -1,17 +1,19 @@
 export type PaperData = {
-  id: number;
-  paper_name: string;
+    id: number;
+    paper_name: string;
+    author: string[];
+    /*
   year: number;
-  author: string[];
   part_no: string;
   type: string;
   manufacturer: string;
   testing_location: TestLocation;
   testing_type: Testing;
   data_type: number;
-}
+  */
+};
 
 export type TestLocation = "Terrestrial" | "Flight";
 
 // Type to ensure testing types are consistent
-export type Testing = "SEE" | "TID" | "DD" | "OTHER";
+export type Testing = "SEE" | "TID" | "DD" | "OTHER";