REFACTOR: Update ResultsPage for when no results are found

frontend/src/components/Layout/DynamicPageContent.tsx

@@ -6,6 +6,7 @@ interface DynamicPageContentProps extends React.HTMLProps<HTMLDivElement> {
   children: React.ReactNode;
   navbarVariant?: "home" | "no-navbar" | "default";
   className?: string;
+  contentClassName?: string;
   style?: React.CSSProperties;
 }
 
@@ -13,6 +14,7 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
   children,
   navbarVariant = "default",
   className = "",
+  contentClassName = "",
   style,
 }) => {
   const { showSideBar } = useSidebar();
@@ -24,7 +26,7 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
         id="content"
         className={`min-w-[850px] ${
           showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"
-        } items-start transition-all duration-[500ms] ease-in-out`}
+        } items-start transition-all duration-[500ms] ease-in-out ${contentClassName}`}
       >
         {children}
       </div>

frontend/src/pages/ResultsPage.tsx

@@ -36,13 +36,14 @@ const ResultsPage: React.FC = ({}) => {
       <DynamicPageContent
         id="results-page"
         navbarVariant="no-navbar"
-        className="flex flex-col items-center justify-evenly min-h-[70vh] my-[15vh] p-4"
+        className="flex flex-col items-stretch justify-stretch h-[70vh] my-[15vh] p-4"
+        contentClassName="flex flex-col items-center h-full p-4"
       >
         <h1 className="text-3xl font-bold mb-4">
           Search results for "{query}"
         </h1>
         <SearchBar value={query} />
-        <h3 className="text-2xl text-gray-400">Nothing Found</h3>
+        <h3 className="flex items-center flex-grow text-2xl text-gray-400">Nothing Found</h3>
         <div className="flex gap-8">
           <Button onClick={() => navigate(-1)}>Go Back</Button>
         </div>