From 33350ddfc7a7eb8bd2d6940e64c28e2dd58c6746 Mon Sep 17 00:00:00 2001
From: Alton Banushi <altonbanushi@icloud.com>
Date: Mon, 21 Oct 2024 15:02:22 -0400
Subject: [PATCH] 81: Fix funny looking scrolling (#87)

---
 .../src/app/(pages)/(dashboard)/companies/page.tsx   |  2 +-
 apps/web/src/app/(pages)/(dashboard)/roles/page.tsx  |  2 +-
 apps/web/src/app/_components/header-layout.tsx       | 12 +++++++-----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/(pages)/(dashboard)/companies/page.tsx b/apps/web/src/app/(pages)/(dashboard)/companies/page.tsx
index b8e6665..41d2419 100644
--- a/apps/web/src/app/(pages)/(dashboard)/companies/page.tsx
+++ b/apps/web/src/app/(pages)/(dashboard)/companies/page.tsx
@@ -20,7 +20,7 @@ export default async function Companies() {
   return (
     <>
       <SearchFilter />
-      <div className="grid h-[75dvh] w-3/4 grid-cols-3 gap-4">
+      <div className="mb-8 grid h-[70dvh] w-3/4 grid-cols-1 gap-4 overflow-y-scroll md:grid-cols-2 xl:grid-cols-3">
         {roles.map((role) => {
           return (
             <RoleReviewCard key={role.id} roleObj={role} className="mb-4" />
diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx
index 9bad2d4..b2f7d63 100644
--- a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx
+++ b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx
@@ -38,7 +38,7 @@ export default function Roles({
       <SearchFilter />
       {/* TODO: Loading animations */}
       {reviews.data && (
-        <div className="mb-8 grid h-[75dvh] w-4/5 grid-cols-5 gap-4 lg:w-3/4">
+        <div className="mb-8 grid h-[70dvh] w-4/5 grid-cols-5 gap-4 lg:w-3/4">
           <div className="col-span-2 gap-3 overflow-scroll pr-4">
             {reviews.data.map((review, i) => {
               return (
diff --git a/apps/web/src/app/_components/header-layout.tsx b/apps/web/src/app/_components/header-layout.tsx
index ab30563..7e30e35 100644
--- a/apps/web/src/app/_components/header-layout.tsx
+++ b/apps/web/src/app/_components/header-layout.tsx
@@ -21,11 +21,13 @@ export default async function HeaderLayout({
   const button = session ? <LogoutButton /> : <LoginButton />;
 
   return (
-    <div className="flex min-h-screen flex-col">
-      <Header session={session} auth={button} />
-      <article className="mt-16 flex w-[100vw] flex-col items-center justify-center gap-16">
-        {children}
-      </article>
+    <div className="flex min-h-screen flex-col justify-between">
+      <div>
+        <Header session={session} auth={button} />
+        <article className="mt-16 flex w-[100vw] flex-col items-center justify-center gap-16">
+          {children}
+        </article>
+      </div>
       <Footer />
     </div>
   );