From 7b0ca603c48532ac22e6a0f5fe3112e1da4faa69 Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Thu, 30 Oct 2025 12:26:30 -1000
Subject: [PATCH] Improve layout of hack page headers

---
 src/app/hack/[slug]/edit/page.tsx |  6 +++---
 src/app/hack/[slug]/page.tsx      | 16 +++++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/app/hack/[slug]/edit/page.tsx b/src/app/hack/[slug]/edit/page.tsx
index 2635075..765a17e 100644
--- a/src/app/hack/[slug]/edit/page.tsx
+++ b/src/app/hack/[slug]/edit/page.tsx
@@ -73,13 +73,13 @@ export default async function EditHackPage({ params }: EditPageProps) {
 
   return (
     <div className="mx-auto max-w-screen-lg px-6 py-10">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between">
         <h1 className="flex items-center text-3xl tracking-tight">
           Edit
           <FaChevronRight size={22} className="inline-block mx-2 text-foreground/50 align-middle" />
           <span className="gradient-text font-bold">{hack.title}</span>
         </h1>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 self-end lg:self-auto mt-8 lg:mt-0">
           <Link href={`/hack/${slug}`} className="inline-flex items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 py-2 text-sm font-medium hover:bg-black/5 dark:hover:bg-white/10">
             <FaChevronLeft size={16} className="inline-block mr-1" />
             Back to hack
@@ -89,7 +89,7 @@ export default async function EditHackPage({ params }: EditPageProps) {
           </Link>
         </div>
       </div>
-      <div className="mt-8">
+      <div className="mt-4 lg:mt-8">
         <HackForm mode="edit" slug={slug} initial={initial} />
       </div>
     </div>
diff --git a/src/app/hack/[slug]/page.tsx b/src/app/hack/[slug]/page.tsx
index 2138d48..441e90b 100644
--- a/src/app/hack/[slug]/page.tsx
+++ b/src/app/hack/[slug]/page.tsx
@@ -122,17 +122,19 @@ export default async function HackDetail({ params }: HackDetailProps) {
             </div>
             <p className="mt-1 text-[15px] text-foreground/70">By {author}</p>
             <p className="mt-2 text-sm text-foreground/75">{hack.summary}</p>
-            <div className="mt-2 flex flex-wrap gap-2">
-              {tags.map((t) => (
-                <span key={t} className="rounded-full bg-[var(--surface-2)] px-2.5 py-1 text-xs ring-1 ring-[var(--border)]">
+          </div>
+          <div className="w-full mt-2 flex flex-col justify-between gap-6 md:flex-row md:items-end">
+            <div className="flex flex-wrap gap-2">
+              {tags.map((t, i) => (
+                <span key={i} style={{ paddingRight: (i % 10) + 10 }} className="rounded-full bg-[var(--surface-2)] px-2.5 py-1 text-xs ring-1 ring-[var(--border)]">
                   {t}
                 </span>
               ))}
             </div>
-          </div>
-          <div className="flex items-center gap-2 self-end md:self-auto">
-            <DownloadsBadge slug={hack.slug} initialCount={hack.downloads} />
-            <HackOptionsMenu slug={hack.slug} canEdit={canEdit} />
+            <div className="flex items-center justify-end gap-2 self-end md:self-auto lg:min-w-[260px]">
+              <DownloadsBadge slug={hack.slug} initialCount={hack.downloads} />
+              <HackOptionsMenu slug={hack.slug} canEdit={canEdit} />
+            </div>
           </div>
         </div>
       </div>