fix: remove hard-coded height from layouts (#1257)

open-sauced · Jun 15, 2023 · 20061bc · 20061bc
1 parent 2b38c25
commit 20061bc
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 16 deletions.
diff --git a/layouts/filter.tsx b/layouts/filter.tsx
@@ -12,9 +12,9 @@ const FilterLayout = ({ children }: { children: React.ReactNode }) => {
   const { toolList, selectedTool, filterName, selectedFilter, userOrg } = useNav();
 
   return (
-    <>
+    <div className="min-h-screen flex flex-col">
       <TopNav />
-      <div className="page-container flex min-h-[calc(100vh-(54px+95px))] bg-light-slate-3 flex-col items-center">
+      <div className="page-container flex grow bg-light-slate-3 flex-col items-center">
         <div className="info-container container w-full min-h-[100px]">
           <Header>
             <FilterHeader />
@@ -33,7 +33,7 @@ const FilterLayout = ({ children }: { children: React.ReactNode }) => {
         </main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 

diff --git a/layouts/hub-page.tsx b/layouts/hub-page.tsx
@@ -25,9 +25,9 @@ const HubPageLayout = ({ children }: { children: React.ReactNode }) => {
   let isOwner = !!(userId && insight && `${userId}` === `${insight.user.id}`);
 
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       <TopNav />
-      <div className="page-container flex min-h-[calc(100vh-(54px+95px))] bg-light-slate-3 flex-col items-center">
+      <div className="page-container flex grow bg-light-slate-3 flex-col items-center">
         <div className="info-container container w-full min-h-[100px]">
           <Header>
             {insight ? (
@@ -65,7 +65,7 @@ const HubPageLayout = ({ children }: { children: React.ReactNode }) => {
         </main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 

diff --git a/layouts/hub.tsx b/layouts/hub.tsx
@@ -5,15 +5,15 @@ import TopNav from "../components/organisms/TopNav/top-nav";
 
 const HubLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       <TopNav />
-      <div className="page-container flex min-h-[calc(100vh-(54px+95px))] flex-col items-center">
+      <div className="page-container flex grow flex-col items-center">
         <main className="flex w-full flex-1 flex-col items-center px-3 md:px-16 py-8 bg-light-slate-2">
           <div className="container mx-auto px-2 md:px-16">{children}</div>
         </main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 

diff --git a/layouts/login.tsx b/layouts/login.tsx
@@ -3,11 +3,9 @@ import LoginTopNav from "../components/organisms/LoginTopNav/login-top-nav";
 
 const LoginLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="bg-[#ECECEC] px-3">
+    <div className="bg-[#ECECEC] px-3 flex flex-col min-h-screen">
       <LoginTopNav />
-      <main className="flex w-full min-h-[calc(100vh-54px)] flex-1 pt-10 lg:pt-0 lg:items-center lg:justify-center">
-        {children}
-      </main>
+      <main className="flex grow w-full flex-1 pt-10 lg:pt-0 lg:items-center lg:justify-center">{children}</main>
     </div>
   );
 };

diff --git a/layouts/profile.tsx b/layouts/profile.tsx
@@ -5,13 +5,13 @@ import TopNav from "../components/organisms/TopNav/top-nav";
 
 const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       <TopNav />
-      <div className="page-container flex min-h-[calc(100vh-(54px+95px))] flex-col items-center">
+      <div className="page-container flex grow flex-col items-center">
         <main className="flex pb-16 w-full flex-1 flex-col items-center bg-light-slate-2">{children}</main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };