fix(dashboard): tighten skill detail dialog spacing (#40419)
The skill detail dialog (Skills hub browser) had several awkward spacing/placement issues: - description and identifier crammed together with no breathing room (-mt-1 pulled the description tight to the header) - the identifier line touched the action-row border - Install was stranded far right with a large empty void in the middle of the action row - the SKILL.md <pre> opened with a leading blank line Fixes: - group description + identifier in a spaced flex-col block (mt-1, gap-1) - give the action row mt-3 + py-2.5 so it separates from the meta block - move the repo link into the right-side group with Install (ml-auto, gap-3) so the row reads left=tabs / right=repo+install, no middle void - mt-3 on the body for consistent vertical rhythm - trim() the SKILL.md content so it starts at the first real line
This commit is contained in:
parent
56236b16e3
commit
e6de6dd559
@ -1187,13 +1187,15 @@ function SkillDetailDialog({
|
|||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<p className="text-xs text-text-secondary -mt-1">{result.description}</p>
|
<div className="mt-1 flex flex-col gap-1">
|
||||||
<p className="text-xs font-mono text-text-tertiary truncate">
|
<p className="text-xs text-text-secondary">{result.description}</p>
|
||||||
{result.identifier}
|
<p className="text-xs font-mono text-text-tertiary truncate">
|
||||||
</p>
|
{result.identifier}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Action row */}
|
{/* Action row */}
|
||||||
<div className="flex flex-wrap items-center gap-2 border-y border-border py-2">
|
<div className="mt-3 flex flex-wrap items-center gap-2 border-y border-border py-2.5">
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
outlined={tab !== "readme"}
|
outlined={tab !== "readme"}
|
||||||
@ -1217,18 +1219,18 @@ function SkillDetailDialog({
|
|||||||
>
|
>
|
||||||
{scan ? "Re-scan" : "Security scan"}
|
{scan ? "Re-scan" : "Security scan"}
|
||||||
</Button>
|
</Button>
|
||||||
{result.repo && (
|
<div className="ml-auto flex items-center gap-3">
|
||||||
<a
|
{result.repo && (
|
||||||
href={`https://github.com/${result.repo}`}
|
<a
|
||||||
target="_blank"
|
href={`https://github.com/${result.repo}`}
|
||||||
rel="noreferrer"
|
target="_blank"
|
||||||
className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
|
rel="noreferrer"
|
||||||
>
|
className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
|
||||||
<ExternalLink className="h-3.5 w-3.5" />
|
>
|
||||||
{result.repo}
|
<ExternalLink className="h-3.5 w-3.5" />
|
||||||
</a>
|
{result.repo}
|
||||||
)}
|
</a>
|
||||||
<div className="ml-auto">
|
)}
|
||||||
{installed ? (
|
{installed ? (
|
||||||
<Button size="sm" ghost disabled prefix={<CheckCircle2 className="h-3.5 w-3.5" />}>
|
<Button size="sm" ghost disabled prefix={<CheckCircle2 className="h-3.5 w-3.5" />}>
|
||||||
Installed
|
Installed
|
||||||
@ -1246,14 +1248,14 @@ function SkillDetailDialog({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Body */}
|
{/* Body */}
|
||||||
<div className="max-h-[55vh] overflow-auto">
|
<div className="mt-3 max-h-[55vh] overflow-auto">
|
||||||
{tab === "readme" ? (
|
{tab === "readme" ? (
|
||||||
previewLoading ? (
|
previewLoading ? (
|
||||||
<div className="flex items-center justify-center py-12">
|
<div className="flex items-center justify-center py-12">
|
||||||
<Spinner className="text-xl text-primary" />
|
<Spinner className="text-xl text-primary" />
|
||||||
</div>
|
</div>
|
||||||
) : preview ? (
|
) : preview ? (
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-2.5">
|
||||||
{preview.tags.length > 0 && (
|
{preview.tags.length > 0 && (
|
||||||
<div className="flex flex-wrap items-center gap-1">
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
{preview.tags.map((tag) => (
|
{preview.tags.map((tag) => (
|
||||||
@ -1275,7 +1277,7 @@ function SkillDetailDialog({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<pre className="whitespace-pre-wrap break-words bg-background/50 border border-border p-3 text-xs font-mono text-text-secondary leading-relaxed">
|
<pre className="whitespace-pre-wrap break-words bg-background/50 border border-border p-3 text-xs font-mono text-text-secondary leading-relaxed">
|
||||||
{preview.skill_md || "(SKILL.md is empty)"}
|
{(preview.skill_md || "").trim() || "(SKILL.md is empty)"}
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user