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 active = detail ?? issue;
const body = detail?.body ?? issue.body ?? issue.body_preview ?? ""; const body = detail?.body ?? issue.body ?? issue.body_preview ?? "";
const stateVariant = active.state === "open" ? "success" : "default"; const stateVariant = active.state === "open" ? "success" : "default";
const showCloseIssue = canClose && active.state === "open";
const handleCloseIssueSuccess = () => { const handleCloseIssueSuccess = () => {
if (detail) setDetail({ ...detail, state: "closed" }); if (detail) setDetail({ ...detail, state: "closed" });
@ -149,9 +150,9 @@ export function ForgejoIssueDetailDialog({
<> <>
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl"> <DialogContent className="max-w-4xl">
<DialogHeader> <DialogHeader className="gap-3">
<div className="flex flex-wrap items-start justify-between gap-3"> <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
<div className="space-y-2"> <div className="min-w-0 space-y-2">
<DialogTitle className="break-words text-base sm:text-lg"> <DialogTitle className="break-words text-base sm:text-lg">
{active.title} {active.title}
</DialogTitle> </DialogTitle>
@ -167,49 +168,49 @@ export function ForgejoIssueDetailDialog({
<span>Updated {formatDateTime(active.forgejo_updated_at)}</span> <span>Updated {formatDateTime(active.forgejo_updated_at)}</span>
</DialogDescription> </DialogDescription>
</div> </div>
<div className="flex flex-wrap items-center gap-2"> {showCloseIssue ? (
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold" 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={() => setIsEditDialogOpen(true)} onClick={() => setIsCloseIssueDialogOpen(true)}
> >
<Pencil className="h-3.5 w-3.5" /> <XCircle className="h-3.5 w-3.5" />
Edit Close Issue
</Button> </Button>
<Button ) : null}
variant="outline" </div>
size="sm" <div className="flex flex-wrap items-center gap-2 sm:justify-end">
className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold" <Button
onClick={() => { variant="outline"
setActiveTab("comments"); size="sm"
setIsCommentDialogOpen(true); className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
}} onClick={() => setIsEditDialogOpen(true)}
> >
<MessageSquarePlus className="h-3.5 w-3.5" /> <Pencil className="h-3.5 w-3.5" />
Comment Edit
</Button> </Button>
{canClose && active.state === "open" ? ( <Button
<Button variant="outline"
variant="outline" size="sm"
size="sm" className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
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={() => {
onClick={() => setIsCloseIssueDialogOpen(true)} setActiveTab("comments");
> setIsCommentDialogOpen(true);
<XCircle className="h-3.5 w-3.5" /> }}
Close Issue >
</Button> <MessageSquarePlus className="h-3.5 w-3.5" />
) : null} Comment
<a </Button>
href={active.html_url} <a
target="_blank" href={active.html_url}
rel="noopener noreferrer" target="_blank"
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)]" 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" /> Open in Forgejo
</a> <ExternalLink className="h-3.5 w-3.5" />
</div> </a>
</div> </div>
</DialogHeader> </DialogHeader>
@ -376,9 +377,9 @@ export function ForgejoIssueDetailDialog({
</TabsContent> </TabsContent>
</Tabs> </Tabs>
<div className="flex justify-end"> <div className="mt-4 flex justify-end">
<Button variant="outline" onClick={() => onOpenChange(false)}> <Button variant="outline" onClick={() => onOpenChange(false)}>
Dismiss Close Window
</Button> </Button>
</div> </div>
</DialogContent> </DialogContent>