fix(ui): clow window button spacing
This commit is contained in:
parent
74756feb95
commit
7678efedc8
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue