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

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,7 +168,19 @@ 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
variant="outline"
size="sm"
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)}
>
<XCircle className="h-3.5 w-3.5" />
Close Issue
</Button>
) : null}
</div>
<div className="flex flex-wrap items-center gap-2 sm:justify-end">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
@ -189,17 +202,6 @@ export function ForgejoIssueDetailDialog({
<MessageSquarePlus className="h-3.5 w-3.5" /> <MessageSquarePlus className="h-3.5 w-3.5" />
Comment Comment
</Button> </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 <a
href={active.html_url} href={active.html_url}
target="_blank" target="_blank"
@ -210,7 +212,6 @@ export function ForgejoIssueDetailDialog({
<ExternalLink className="h-3.5 w-3.5" /> <ExternalLink className="h-3.5 w-3.5" />
</a> </a>
</div> </div>
</div>
</DialogHeader> </DialogHeader>
{isLoading ? ( {isLoading ? (
@ -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>