Fix news cards breaking hard if no image present

KSET · Aug 7, 2023 · 4c91e5e · 4c91e5e
1 parent 22f41f6
commit 4c91e5e
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx
@@ -7,6 +7,7 @@ import { type FC, useEffect, useState } from "react";
 import VariantImage from "~/components/base/image/variant-image";
 import LoadingArea from "~/components/base/loading";
 import { type ServerSideProps } from "~/types/server";
+import { cn } from "~/utils/class";
 import { src } from "~/utils/kset-image";
 import { api } from "~/utils/queryApi";
 import { createApi } from "~/utils/serverApi";
@@ -118,25 +119,27 @@ const NewsList: FC<{
           return (
             <article
               key={newsItem.id}
+              className="flex"
               id={`news_${newsItem.slug ?? newsItem.id}`}
             >
               <Link
-                className="text-white no-underline opacity-90 transition-opacity duration-300 hover:opacity-100 hover:duration-0"
+                className={cn(
+                  "w-full text-white no-underline opacity-90 transition-opacity duration-300 hover:opacity-100 hover:duration-0",
+                  !newsItem.thumb ? "mt-auto" : null,
+                )}
                 href={{
                   pathname: "/news/[slug]",
                   query: {
                     slug: newsItem.slug,
                   },
                 }}
               >
-                <div>
-                  <VariantImage
-                    alt={newsItem.subject}
-                    aspectRatio={16 / 10}
-                    className="w-full"
-                    src={src(newsItem.thumb)}
-                  />
-                </div>
+                <VariantImage
+                  alt={newsItem.subject}
+                  aspectRatio={16 / 10}
+                  className="w-full"
+                  src={src(newsItem.thumb)}
+                />
 
                 <div className="mb-2 mt-5 text-sm tracking-widest">
                   <span className="text-primary">Ligma</span>