fix: make TagSelector always visible for accessibility and mobile support (#23515)

This commit is contained in:
lyzno1
2025-08-07 09:25:26 +08:00
committed by GitHub
parent d253ca192a
commit f6c7175828
10 changed files with 19 additions and 26 deletions

View File

@@ -370,20 +370,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
{app.description}
</div>
</div>
<div className={cn(
'absolute bottom-1 left-0 right-0 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
tags.length ? 'flex' : '!hidden group-hover:!flex',
)}>
<div className='absolute bottom-1 left-0 right-0 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
{isCurrentWorkspaceEditor && (
<>
<div className={cn('flex w-0 grow items-center gap-1')} onClick={(e) => {
e.stopPropagation()
e.preventDefault()
}}>
<div className={cn(
'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
tags.length ? '!block' : '!hidden',
)}>
<div className='mr-[41px] w-full grow group-hover:!mr-0'>
<TagSelector
position='bl'
type='app'
@@ -395,7 +389,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
/>
</div>
</div>
<div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
<div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex' />
<div className='!hidden shrink-0 group-hover:!flex'>
<CustomPopover
htmlContent={<Operations />}

View File

@@ -238,12 +238,16 @@ const TagSelector: FC<TagSelectorProps> = ({
}, [selectedTags, tagList])
const Trigger = () => {
const hasNoTags = !triggerContent
return (
<div className={cn(
'group/tip relative flex w-full cursor-pointer items-center gap-1 rounded-md px-2 py-[7px] hover:bg-state-base-hover',
)}>
<Tag01 className='h-3 w-3 shrink-0 text-components-input-text-placeholder' />
<div className='system-sm-regular grow truncate text-start text-components-input-text-placeholder'>
<div className={cn(
'system-sm-regular grow truncate text-start',
hasNoTags ? 'italic text-components-input-text-placeholder' : 'font-medium text-components-input-text-placeholder',
)}>
{!triggerContent ? t('common.tag.addTag') : triggerContent}
</div>
</div>