fix(web): prevent list cell text and badge overflow (#5510)
* fix(ui): prevent table cell text overflow - add default truncation with hover details for text cells in shared and static data tables to prevent content from spilling into adjacent columns. - adjust API key group, model, and IP restriction columns to fix badge overlap and left alignment drift. - reuse a shared truncated cell component and add width constraints for composite badge cells. * fix(table): prevent badge content from overflowing columns - make table text and badge cells shrink within constrained columns so long values truncate instead of bleeding into adjacent cells. - add a shared BadgeCell wrapper to keep badge alignment consistent across API keys and other list pages. - update affected list views to use constrained wrappers for group, provider, pricing, OAuth, and API info values.
This commit is contained in:
@@ -27,6 +27,7 @@ import {
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
import { BadgeCell } from '@/components/data-table'
|
||||
import { GroupBadge } from '@/components/group-badge'
|
||||
import { LongText } from '@/components/long-text'
|
||||
import { StatusBadge } from '@/components/status-badge'
|
||||
@@ -227,7 +228,11 @@ export function useUsersColumns(): ColumnDef<User>[] {
|
||||
header: t('Group'),
|
||||
cell: ({ row }) => {
|
||||
const group = row.getValue('group') as string
|
||||
return <GroupBadge group={group} />
|
||||
return (
|
||||
<BadgeCell>
|
||||
<GroupBadge group={group} />
|
||||
</BadgeCell>
|
||||
)
|
||||
},
|
||||
filterFn: (row, id, value) => {
|
||||
const group = String(row.getValue(id) || t('User Group')).toLowerCase()
|
||||
@@ -272,7 +277,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
|
||||
const inviterId = user.inviter_id || 0
|
||||
|
||||
return (
|
||||
<div className='flex min-w-[220px] flex-wrap items-center gap-1'>
|
||||
<div className='flex max-w-full min-w-0 flex-wrap items-center gap-1 overflow-hidden'>
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
render={
|
||||
|
||||
Reference in New Issue
Block a user