From 178e8f37ebe42ce37f7a67ab538328ebabc249c0 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 1 Aug 2025 17:40:28 -0400
Subject: [PATCH] Improve article and publication card layouts for
 responsiveness

---
 src/app/articles/page.tsx     | 19 +++++++++++++++----
 src/app/publications/page.tsx |  4 ++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/app/articles/page.tsx b/src/app/articles/page.tsx
index 4793edb..45f82c0 100644
--- a/src/app/articles/page.tsx
+++ b/src/app/articles/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ArrowUpRight, Newspaper } from "lucide-react";
+import { Button } from "~/components/ui/button";
 import Link from "next/link";
 import {
   Card,
@@ -54,25 +55,35 @@ export default function ArticlesPage() {
             >
               <Card>
                 <CardHeader>
-                  <div className="flex items-center justify-between">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                     <CardTitle>{article.title}</CardTitle>
                     <Link
                       href={article.link}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-muted-foreground hover:text-primary"
+                      className="hidden items-center gap-1 text-sm text-muted-foreground hover:text-primary sm:flex sm:flex-shrink-0"
                     >
-                      <ArrowUpRight className="h-5 w-5" />
+                      Read Article
+                      <ArrowUpRight className="h-4 w-4" />
                     </Link>
                   </div>
                   <CardDescription className="text-sm text-muted-foreground">
                     Written by {article.author}, found in {article.source}.
                   </CardDescription>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="space-y-4">
                   <p className="text-sm text-muted-foreground">
                     {article.description}
                   </p>
+                  <Link
+                    href={article.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary sm:hidden"
+                  >
+                    Read Article
+                    <ArrowUpRight className="h-4 w-4" />
+                  </Link>
                 </CardContent>
               </Card>
             </div>
diff --git a/src/app/publications/page.tsx b/src/app/publications/page.tsx
index 118aaef..8ee1ce5 100644
--- a/src/app/publications/page.tsx
+++ b/src/app/publications/page.tsx
@@ -110,14 +110,14 @@ export default function PublicationsPage() {
             >
               <Card>
                 <CardHeader className="pb-2">
-                  <div className="flex items-center justify-between">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                     <CardTitle>{pub.title}</CardTitle>
                     {pub.paperUrl && (
                       <Link
                         href={pub.paperUrl}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-muted-foreground hover:text-primary"
+                        className="text-muted-foreground hover:text-primary sm:flex-shrink-0"
                       >
                         <ArrowUpRight className="h-5 w-5" />
                       </Link>