mirror of
https://github.com/iflytek/skillhub.git
synced 2026-10-15 04:18:20 +00:00
fix(web): improve suite markdown code block contrast and member list truncation tooltips
- Add text-foreground/90 fallback to fenced code blocks in MarkdownRenderer to fix low-contrast syntax-highlighting token colors in light mode - Add title attributes to truncated member display names and coordinates in SuiteMemberTable and SuiteEditor member lists Closes #864 Made-with: Proma
This commit is contained in:
parent
7cf9f22182
commit
bc1a4a1e75
3 changed files with 5 additions and 5 deletions
|
|
@ -134,7 +134,7 @@ function MarkdownRendererComponent({ content, className, onLinkClick }: Markdown
|
|||
}
|
||||
|
||||
return (
|
||||
<code className={codeClassName} {...props}>
|
||||
<code className={cn(codeClassName, 'text-foreground/90')} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -48,14 +48,14 @@ export function SuiteMemberTable({ suite, returnTo, management = false, onEdit }
|
|||
const identity = (
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className={cn('truncate font-medium', navigable && 'text-blue-700 dark:text-blue-300')}>{memberName}</span>
|
||||
<span className={cn('truncate font-medium', navigable && 'text-blue-700 dark:text-blue-300')} title={memberName}>{memberName}</span>
|
||||
{member.entry ? (
|
||||
<span className="rounded-md border border-blue-500/20 bg-blue-500/10 px-1.5 py-0.5 text-[11px] font-medium text-blue-700 dark:text-blue-300">
|
||||
{t('suite.entrySkill')}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="mt-0.5 truncate font-mono text-xs text-muted-foreground">{coordinate}</p>
|
||||
<p className="mt-0.5 truncate font-mono text-xs text-muted-foreground" title={coordinate}>{coordinate}</p>
|
||||
{member.summary ? (
|
||||
<p className="mt-1 line-clamp-1 text-xs text-muted-foreground md:hidden">{member.summary}</p>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -641,8 +641,8 @@ export function SuiteEditor({ namespace: routeNamespace, slug: routeSlug, versio
|
|||
<div key={member.skillVersionId} className={cn('rounded-lg border p-2.5', isEntry && 'border-amber-300 bg-amber-50/60 dark:bg-amber-950/20')}>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<button type="button" className="min-w-[220px] flex-1 text-left" onClick={() => setEntrySkillVersionId(member.skillVersionId)}>
|
||||
<span className="block truncate text-sm font-medium">{member.displayName}</span>
|
||||
<span className="text-xs text-muted-foreground">@{member.namespace}/{member.slug}@{member.version}</span>
|
||||
<span className="block truncate text-sm font-medium" title={member.displayName}>{member.displayName}</span>
|
||||
<span className="truncate text-xs text-muted-foreground" title={`@${member.namespace}/${member.slug}@${member.version}`}>@{member.namespace}/{member.slug}@{member.version}</span>
|
||||
</button>
|
||||
{isEntry ? <span className="rounded-full bg-amber-200/80 px-2 py-0.5 text-xs text-amber-900">{t('suite.entrySkill')}</span> : null}
|
||||
<Button className="h-7 w-7 p-0" aria-label={t('suite.moveMemberUp', { name: member.displayName })} variant="outline" size="sm" disabled={index === 0} onClick={() => moveMember(index, -1)}><ArrowUp className="h-3.5 w-3.5" aria-hidden="true" /></Button>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue