From e6de6dd559b482b9ac90dc9417c77c1f3f54b89e Mon Sep 17 00:00:00 2001
From: Teknium <127238744+teknium1@users.noreply.github.com>
Date: Sat, 6 Jun 2026 07:40:36 -0700
Subject: [PATCH] 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
---
 web/src/pages/SkillsPage.tsx | 42 +++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/web/src/pages/SkillsPage.tsx b/web/src/pages/SkillsPage.tsx
index 5131cc3e877..c21a3e481d0 100644
--- a/web/src/pages/SkillsPage.tsx
+++ b/web/src/pages/SkillsPage.tsx
@@ -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>
             ) : (