From 6959500fc374a9379df5a8c6da6915e015095205 Mon Sep 17 00:00:00 2001
From: Pratik Bodkhe <pratikbodkhe@gmail.com>
Date: Fri, 5 Jun 2026 17:55:09 +0900
Subject: [PATCH] fix: preserve issue detail heading semantics

---
 e2e/issue-detail.spec.ts                      |  4 ++-
 .../issues/[id]/issue-detail-content.tsx      | 25 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/e2e/issue-detail.spec.ts b/e2e/issue-detail.spec.ts
index 03780d9..86ca58f 100644
--- a/e2e/issue-detail.spec.ts
+++ b/e2e/issue-detail.spec.ts
@@ -9,7 +9,9 @@ test.describe("Issue Detail Page", () => {
   test("displays issue title and metadata", async ({ page }) => {
     await page.goto(`/issues/${ISSUE_ID}`);
 
-    await expect(page.getByText(ISSUE_TITLE)).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: ISSUE_TITLE })
+    ).toBeVisible();
     await expect(page.getByText("Owner")).toBeVisible();
     await expect(page.getByText("Due")).toBeVisible();
     await expect(page.getByText("Priority")).toBeVisible();
diff --git a/src/app/(app)/issues/[id]/issue-detail-content.tsx b/src/app/(app)/issues/[id]/issue-detail-content.tsx
index 36a914b..20ad436 100644
--- a/src/app/(app)/issues/[id]/issue-detail-content.tsx
+++ b/src/app/(app)/issues/[id]/issue-detail-content.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import {
   ArrowLeft,
   Check,
+  Pencil,
   Trash2,
   Calendar as CalendarIcon,
 } from "lucide-react";
@@ -150,6 +151,28 @@ function InlineEditText({
     );
   }
 
+  const displayValue = value || placeholder || "Click to edit";
+
+  if (Tag === "h1") {
+    return (
+      <div className="mb-3 flex items-start gap-2">
+        <h1 className={cn(!value && "text-ink-4 italic", className)}>
+          {displayValue}
+        </h1>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={() => setEditing(true)}
+          aria-label={`Edit ${placeholder ?? "field"}`}
+          className="mt-0.5 size-7 shrink-0 text-ink-3 hover:text-ink"
+        >
+          <Pencil className="size-3.5" />
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <Tag
       className={cn(
@@ -165,7 +188,7 @@ function InlineEditText({
       role="button"
       aria-label={`Edit ${placeholder ?? "field"}`}
     >
-      {value || placeholder || "Click to edit"}
+      {displayValue}
     </Tag>
   );
 }