From b339f923d66ca3df7e1fd1271e5c9d1a97440136 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Mon, 16 Mar 2026 18:59:36 -0500
Subject: [PATCH] Fix skill list namespace layout to stack vertically

The namespace was appearing side-by-side with the skill name because
they were in the same flex row. Restructured the layout so the
namespace appears on its own line above, with the icon and skill name
on the row below it.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/CompanySkills.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/ui/src/pages/CompanySkills.tsx b/ui/src/pages/CompanySkills.tsx
index 7b55006c..d33023b6 100644
--- a/ui/src/pages/CompanySkills.tsx
+++ b/ui/src/pages/CompanySkills.tsx
@@ -422,23 +422,25 @@ function SkillList({
                 className="flex min-w-0 items-center self-stretch pr-2 text-left no-underline"
                 onClick={() => onSelectSkill(skill.id)}
               >
-                <span className="flex min-w-0 items-center gap-2 self-center">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground opacity-75 transition-opacity group-hover:opacity-100">
-                        <SourceIcon className="h-3.5 w-3.5" />
-                        <span className="sr-only">{source.managedLabel}</span>
-                      </span>
-                    </TooltipTrigger>
-                    <TooltipContent side="top">{source.managedLabel}</TooltipContent>
-                  </Tooltip>
+                <span className="min-w-0 self-center">
                   {skill.key.includes("/") && (
                     <span className="block truncate font-mono text-[11px] leading-4 text-muted-foreground">
                       {skill.key.split("/").slice(0, -1).join("/")}
                     </span>
                   )}
-                  <span className="block min-w-0 overflow-hidden text-[13px] font-medium leading-5 [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]">
-                    {skill.name}
+                  <span className="flex min-w-0 items-center gap-2">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground opacity-75 transition-opacity group-hover:opacity-100">
+                          <SourceIcon className="h-3.5 w-3.5" />
+                          <span className="sr-only">{source.managedLabel}</span>
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent side="top">{source.managedLabel}</TooltipContent>
+                    </Tooltip>
+                    <span className="min-w-0 overflow-hidden text-[13px] font-medium leading-5 [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]">
+                      {skill.name}
+                    </span>
                   </span>
                 </span>
               </Link>