From 7678efedc88877acc3a058c675f1e2e01d79649a Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Fri, 22 May 2026 00:41:19 -0500
Subject: [PATCH] fix(ui): clow window button spacing

---
 .../git/ForgejoIssueDetailDialog.tsx          | 87 ++++++++++---------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/git/ForgejoIssueDetailDialog.tsx b/frontend/src/components/git/ForgejoIssueDetailDialog.tsx
index df37cba..668f14f 100644
--- a/frontend/src/components/git/ForgejoIssueDetailDialog.tsx
+++ b/frontend/src/components/git/ForgejoIssueDetailDialog.tsx
@@ -116,6 +116,7 @@ export function ForgejoIssueDetailDialog({
   const active = detail ?? issue;
   const body = detail?.body ?? issue.body ?? issue.body_preview ?? "";
   const stateVariant = active.state === "open" ? "success" : "default";
+  const showCloseIssue = canClose && active.state === "open";
 
   const handleCloseIssueSuccess = () => {
     if (detail) setDetail({ ...detail, state: "closed" });
@@ -149,9 +150,9 @@ export function ForgejoIssueDetailDialog({
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent className="max-w-4xl">
-          <DialogHeader>
-            <div className="flex flex-wrap items-start justify-between gap-3">
-              <div className="space-y-2">
+          <DialogHeader className="gap-3">
+            <div className="grid gap-3 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>
@@ -167,49 +168,49 @@ export function ForgejoIssueDetailDialog({
                   <span>Updated {formatDateTime(active.forgejo_updated_at)}</span>
                 </DialogDescription>
               </div>
-              <div className="flex flex-wrap items-center gap-2">
+              {showCloseIssue ? (
                 <Button
                   variant="outline"
                   size="sm"
-                  className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
-                  onClick={() => setIsEditDialogOpen(true)}
+                  className="h-9 justify-self-end gap-2 rounded-xl border-[color:rgba(248,113,113,0.45)] px-3 text-xs font-semibold text-[color:var(--danger)] hover:bg-[color:rgba(248,113,113,0.08)]"
+                  onClick={() => setIsCloseIssueDialogOpen(true)}
                 >
-                  <Pencil className="h-3.5 w-3.5" />
-                  Edit
+                  <XCircle className="h-3.5 w-3.5" />
+                  Close Issue
                 </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
-                  onClick={() => {
-                    setActiveTab("comments");
-                    setIsCommentDialogOpen(true);
-                  }}
-                >
-                  <MessageSquarePlus className="h-3.5 w-3.5" />
-                  Comment
-                </Button>
-                {canClose && active.state === "open" ? (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-9 gap-2 rounded-xl border-[color:rgba(248,113,113,0.45)] px-3 text-xs font-semibold text-[color:var(--danger)] hover:bg-[color:rgba(248,113,113,0.08)]"
-                    onClick={() => setIsCloseIssueDialogOpen(true)}
-                  >
-                    <XCircle className="h-3.5 w-3.5" />
-                    Close Issue
-                  </Button>
-                ) : null}
-                <a
-                  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)]"
-                >
-                  Open in Forgejo
-                  <ExternalLink className="h-3.5 w-3.5" />
-                </a>
-              </div>
+              ) : null}
+            </div>
+            <div className="flex flex-wrap items-center gap-2 sm:justify-end">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
+                onClick={() => setIsEditDialogOpen(true)}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+                Edit
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
+                onClick={() => {
+                  setActiveTab("comments");
+                  setIsCommentDialogOpen(true);
+                }}
+              >
+                <MessageSquarePlus className="h-3.5 w-3.5" />
+                Comment
+              </Button>
+              <a
+                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)]"
+              >
+                Open in Forgejo
+                <ExternalLink className="h-3.5 w-3.5" />
+              </a>
             </div>
           </DialogHeader>
 
@@ -376,9 +377,9 @@ export function ForgejoIssueDetailDialog({
             </TabsContent>
           </Tabs>
 
-          <div className="flex justify-end">
+          <div className="mt-4 flex justify-end">
             <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Dismiss
+              Close Window
             </Button>
           </div>
         </DialogContent>