81: Fix funny looking scrolling (#87)

sandboxnu · Oct 21, 2024 · 33350dd · 33350dd
1 parent b9ba9ec
commit 33350dd
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>
   );