mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix skill list namespace layout to stack vertically

Browse source 
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>
This commit is contained in:
Dotta 2026-03-16 18:59:36 -05:00
parent 9e843c4dec
commit b339f923d6
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/src/pages/CompanySkills.tsx
View file

@ -422,7 +422,13 @@ function SkillList({
className="flex min-w-0 items-center self-stretch pr-2 text-left no-underline" className="flex min-w-0 items-center self-stretch pr-2 text-left no-underline"
onClick={() => onSelectSkill(skill.id)} onClick={() => onSelectSkill(skill.id)}
> >
<span className="flex min-w-0 items-center gap-2 self-center"> <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="flex min-w-0 items-center gap-2">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <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"> <span className="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground opacity-75 transition-opacity group-hover:opacity-100">
@ -432,15 +438,11 @@ function SkillList({
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top">{source.managedLabel}</TooltipContent> <TooltipContent side="top">{source.managedLabel}</TooltipContent>
</Tooltip> </Tooltip>
{skill.key.includes("/") && ( <span className="min-w-0 overflow-hidden text-[13px] font-medium leading-5 [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]">
<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} {skill.name}
</span> </span>
</span> </span>
</span>
</Link> </Link>
<button <button
type="button" type="button"