mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-06-12 08:51:53 +00:00
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
1 changed files with 22 additions and 20 deletions
|
|
@ -1187,13 +1187,15 @@ function SkillDetailDialog({
|
|||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<p className="text-xs text-text-secondary -mt-1">{result.description}</p>
|
||||
<p className="text-xs font-mono text-text-tertiary truncate">
|
||||
{result.identifier}
|
||||
</p>
|
||||
<div className="mt-1 flex flex-col gap-1">
|
||||
<p className="text-xs text-text-secondary">{result.description}</p>
|
||||
<p className="text-xs font-mono text-text-tertiary truncate">
|
||||
{result.identifier}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
size="sm"
|
||||
outlined={tab !== "readme"}
|
||||
|
|
@ -1217,18 +1219,18 @@ function SkillDetailDialog({
|
|||
>
|
||||
{scan ? "Re-scan" : "Security scan"}
|
||||
</Button>
|
||||
{result.repo && (
|
||||
<a
|
||||
href={`https://github.com/${result.repo}`}
|
||||
target="_blank"
|
||||
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}
|
||||
</a>
|
||||
)}
|
||||
<div className="ml-auto">
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
{result.repo && (
|
||||
<a
|
||||
href={`https://github.com/${result.repo}`}
|
||||
target="_blank"
|
||||
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}
|
||||
</a>
|
||||
)}
|
||||
{installed ? (
|
||||
<Button size="sm" ghost disabled prefix={<CheckCircle2 className="h-3.5 w-3.5" />}>
|
||||
Installed
|
||||
|
|
@ -1246,14 +1248,14 @@ function SkillDetailDialog({
|
|||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="max-h-[55vh] overflow-auto">
|
||||
<div className="mt-3 max-h-[55vh] overflow-auto">
|
||||
{tab === "readme" ? (
|
||||
previewLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Spinner className="text-xl text-primary" />
|
||||
</div>
|
||||
) : preview ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{preview.tags.length > 0 && (
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{preview.tags.map((tag) => (
|
||||
|
|
@ -1275,7 +1277,7 @@ function SkillDetailDialog({
|
|||
</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">
|
||||
{preview.skill_md || "(SKILL.md is empty)"}
|
||||
{(preview.skill_md || "").trim() || "(SKILL.md is empty)"}
|
||||
</pre>
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue