null
/
Pipeline
1
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

fix(ui): clow window button spacing

This commit is contained in:
null 2026-05-22 00:41:19 -05:00
parent 74756feb95
commit 7678efedc8
1 changed files with 44 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/components/git/ForgejoIssueDetailDialog.tsx
View File

@ -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>