From 83be908c4f507c2a2bfa6fe1fa145109b5556b0e Mon Sep 17 00:00:00 2001
From: Michael Brusegard <56915010+michaelbrusegard@users.noreply.github.com>
Date: Thu, 25 Jan 2024 01:12:56 +0100
Subject: [PATCH] fix: fixed responsive height and main height overflow

---
 src/components/layout/Footer.tsx |  2 +-
 src/components/layout/Header.tsx |  2 +-
 src/components/layout/Main.tsx   |  7 +----
 src/components/news/NewsCard.tsx | 51 ++++++++++++++++++--------------
 4 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index e4c0de3..134cb6b 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -18,7 +18,7 @@ function Footer() {
   const t = useTranslations('layout');
   const year = new Date().getFullYear();
   return (
-    <footer className='z-10 flex w-full justify-center border-t border-border/40 bg-background/95 px-11 py-10 md:px-16 lg:px-24'>
+    <footer className='flex w-full justify-center border-t border-border/40 bg-background/95 px-11 py-10 md:px-16 lg:px-24'>
       <div className='w-full max-w-screen-2xl text-sm'>
         <div className='grid grid-cols-1 gap-x-4 gap-y-12 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'>
           <div>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index e2c68c8..190294e 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -26,7 +26,7 @@ function Header() {
             events={t('events')}
             about={t('about')}
           />
-          <div>
+          <div className='flex'>
             <LocaleMenu changeLocale={t('changeLocale')} />
             <DarkModeMenu
               toggleTheme={t('toggleTheme')}
diff --git a/src/components/layout/Main.tsx b/src/components/layout/Main.tsx
index 138d57d..6ee256e 100644
--- a/src/components/layout/Main.tsx
+++ b/src/components/layout/Main.tsx
@@ -10,12 +10,7 @@ type Props = {
 
 function Main({ children, mainClassName, className }: Props) {
   return (
-    <main
-      className={cx(
-        'flex h-full w-full flex-grow justify-center',
-        mainClassName,
-      )}
-    >
+    <main className={cx('flex w-full flex-grow justify-center', mainClassName)}>
       <div
         className={cx(
           'h-full w-full max-w-screen-2xl px-4 sm:px-11 md:px-16 lg:px-24',
diff --git a/src/components/news/NewsCard.tsx b/src/components/news/NewsCard.tsx
index 3ad467d..0dc07b2 100644
--- a/src/components/news/NewsCard.tsx
+++ b/src/components/news/NewsCard.tsx
@@ -21,29 +21,36 @@ type NewsCardProps = {
 
 function NewsCard({ className, id, title, date, photoUrl }: NewsCardProps) {
   return (
-    <Card
-      className={cx(
-        'relative flex h-full min-h-32 w-full bg-cover bg-center',
-        className,
-      )}
+    <Button
+      className={cx('whitespace-normal font-normal', className)}
+      asChild
+      variant='none'
+      size='none'
     >
-      <Image
-        className='rounded-lg'
-        src={`/${photoUrl}`}
-        alt={title}
-        layout='fill'
-        objectFit='cover'
-        objectPosition='center'
-      />
-      <CardHeader className='mt-auto w-full rounded-b-lg bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:p-6'>
-        <CardTitle className='line-clamp-1 text-lg sm:text-xl lg:text-2xl'>
-          {title}
-        </CardTitle>
-        <CardDescription className='line-clamp-1 text-xs sm:text-sm'>
-          {date}
-        </CardDescription>
-      </CardHeader>
-    </Card>
+      <Link href={`/news/${id}`}>
+        <Card
+          className={cx(
+            'relative flex h-full min-h-32 w-full bg-cover bg-center',
+            className,
+          )}
+        >
+          <Image
+            className='rounded-lg object-cover object-center'
+            src={`/${photoUrl}`}
+            alt={title}
+            fill
+          />
+          <CardHeader className='mt-auto w-full rounded-b-lg bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:p-6'>
+            <CardTitle className='line-clamp-1 text-lg sm:text-xl lg:text-2xl'>
+              {title}
+            </CardTitle>
+            <CardDescription className='line-clamp-1 text-xs sm:text-sm'>
+              {date}
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </Link>
+    </Button>
   );
 }