From 3685cbf7618aca4124d042c27496367c0ba3b272 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 24 May 2026 17:31:55 -0500
Subject: [PATCH] style: enhance styling and layout of ForgejoIssueDetailDialog
 component

---
 .../git/ForgejoIssueDetailDialog.tsx          | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/git/ForgejoIssueDetailDialog.tsx b/frontend/src/components/git/ForgejoIssueDetailDialog.tsx
index b183c4d..62bee22 100644
--- a/frontend/src/components/git/ForgejoIssueDetailDialog.tsx
+++ b/frontend/src/components/git/ForgejoIssueDetailDialog.tsx
@@ -100,7 +100,9 @@ export function ForgejoIssueDetailDialog({
         if (!cancelled) setIsLoading(false);
       }
     })();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   };
 
   useEffect(() => {
@@ -178,14 +180,14 @@ export function ForgejoIssueDetailDialog({
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-4xl">
-          <DialogHeader className="gap-4">
-            <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
+        <DialogContent className="max-w-4xl border-[color:var(--border-strong)] bg-[color:var(--surface)]/95 backdrop-blur-xl">
+          <DialogHeader className="gap-5 border-b border-[color:var(--border)] pb-5">
+            <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
               <div className="min-w-0 space-y-2">
                 <DialogTitle className="break-words text-base sm:text-lg">
                   {active.title}
                 </DialogTitle>
-                <DialogDescription className="flex flex-wrap items-center gap-2 text-xs sm:text-sm">
+                <DialogDescription className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs sm:text-sm">
                   <span className="font-medium text-strong">
                     {repositoryName}
                   </span>
@@ -193,8 +195,12 @@ export function ForgejoIssueDetailDialog({
                     #{active.forgejo_issue_number}
                   </span>
                   <Badge variant={stateVariant}>{active.state}</Badge>
-                  <span>Opened {formatDateTime(active.forgejo_created_at)}</span>
-                  <span>Updated {formatDateTime(active.forgejo_updated_at)}</span>
+                  <span>
+                    Opened {formatDateTime(active.forgejo_created_at)}
+                  </span>
+                  <span>
+                    Updated {formatDateTime(active.forgejo_updated_at)}
+                  </span>
                 </DialogDescription>
               </div>
               {showCloseIssue ? (
@@ -209,11 +215,11 @@ export function ForgejoIssueDetailDialog({
                 </Button>
               ) : null}
             </div>
-            <div className="flex flex-wrap items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)]/45 p-1.5">
               <Button
                 variant="outline"
                 size="sm"
-                className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
+                className="h-9 gap-2 rounded-xl bg-[color:var(--surface)]/60 px-3 text-xs font-semibold"
                 onClick={() => setIsEditDialogOpen(true)}
               >
                 <Pencil className="h-3.5 w-3.5" />
@@ -222,7 +228,7 @@ export function ForgejoIssueDetailDialog({
               <Button
                 variant="outline"
                 size="sm"
-                className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
+                className="h-9 gap-2 rounded-xl bg-[color:var(--surface)]/60 px-3 text-xs font-semibold"
                 onClick={() => {
                   setActiveTab("comments");
                   setIsCommentDialogOpen(true);
@@ -234,7 +240,7 @@ export function ForgejoIssueDetailDialog({
               <Button
                 variant="outline"
                 size="sm"
-                className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
+                className="h-9 gap-2 rounded-xl bg-[color:var(--surface)]/60 px-3 text-xs font-semibold"
                 onClick={() => setIsAssignDialogOpen(true)}
               >
                 <UserPlus className="h-3.5 w-3.5" />
@@ -243,7 +249,7 @@ export function ForgejoIssueDetailDialog({
               <Button
                 variant="outline"
                 size="sm"
-                className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
+                className="h-9 gap-2 rounded-xl bg-[color:var(--surface)]/60 px-3 text-xs font-semibold"
                 onClick={handleDispatchToClaudeCode}
                 title="Copy issue as VSCode prompt"
               >
@@ -254,7 +260,7 @@ export function ForgejoIssueDetailDialog({
                 href={active.html_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex h-9 items-center gap-2 rounded-xl border border-[color:var(--border)] px-3 text-xs font-semibold text-muted transition hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]"
+                className="inline-flex h-9 items-center gap-2 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)]/60 px-3 text-xs font-semibold text-muted transition hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]"
               >
                 Open in Forgejo
                 <ExternalLink className="h-3.5 w-3.5" />
@@ -275,22 +281,24 @@ export function ForgejoIssueDetailDialog({
             </div>
           ) : null}
 
-          <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-1">
-            <TabsList>
-              <TabsTrigger value="overview">Overview</TabsTrigger>
-              <TabsTrigger value="comments">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-5">
+            <TabsList className="max-w-full overflow-x-auto rounded-2xl bg-[color:var(--surface-muted)]/45">
+              <TabsTrigger className="shrink-0 rounded-xl" value="overview">
+                Overview
+              </TabsTrigger>
+              <TabsTrigger className="shrink-0 rounded-xl" value="comments">
                 Comments ({comments.length})
               </TabsTrigger>
-              <TabsTrigger value="timeline">
+              <TabsTrigger className="shrink-0 rounded-xl" value="timeline">
                 Timeline ({timeline.length})
               </TabsTrigger>
-              <TabsTrigger value="reactions">
+              <TabsTrigger className="shrink-0 rounded-xl" value="reactions">
                 Reactions ({reactions.length})
               </TabsTrigger>
             </TabsList>
 
             <TabsContent value="overview">
-              <div className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4">
+              <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)]/70 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
                 {body ? (
                   <Markdown content={body} variant="comment" />
                 ) : (
@@ -401,8 +409,7 @@ export function ForgejoIssueDetailDialog({
                   </div>
                 ) : (
                   reactions.map((reaction, idx) => {
-                    const content =
-                      asString(reaction.content) ?? "reaction";
+                    const content = asString(reaction.content) ?? "reaction";
                     const login =
                       asString(
                         reaction.user &&