fix: aspect-ratio (#906)

openstatusHQ · Jun 30, 2024 · eb0ccfe · eb0ccfe
1 parent d592d22
commit eb0ccfe
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/apps/web/src/components/content/article.tsx b/apps/web/src/components/content/article.tsx
@@ -19,7 +19,7 @@ export function Article({ post }: { post: Post }) {
     <article className="relative mx-auto flex max-w-prose flex-col gap-8">
       <div className="grid w-full gap-3">
         <h1 className="mb-5 font-cal text-3xl">{post.title}</h1>
-        <div className="relative h-64 w-full overflow-hidden rounded-lg border border-border">
+        <div className="relative aspect-video w-full overflow-hidden rounded-lg border border-border">
           <Image
             src={post.image}
             fill={true}

diff --git a/apps/web/src/components/content/timeline.tsx b/apps/web/src/components/content/timeline.tsx
@@ -57,13 +57,13 @@ function Article({
           </time>
         </div>
       </div>
-      <div className="relative order-1 h-64 w-full md:order-2 md:col-span-4">
+      <div className="relative order-1 aspect-video w-full overflow-hidden rounded-md border border-border md:order-2 md:col-span-4">
         <Link href={href}>
           <Image
             src={imageSrc}
             fill={true}
             alt={title}
-            className="rounded-md border border-border object-cover"
+            className="object-cover"
           />
         </Link>
       </div>