🐛 fix(vscode): 代码阅读属性表的属性名一列按这张表里最长的名字放宽,长名字不再压到值上

This commit is contained in:
cruldra committed 2026-09-28 00:44:53 +08:00
1 parent ff2a44f080
commit c577f38bee
1 file changed
+5 -5
@@ -144,7 +144,7 @@ export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
onToggleFold: (id: string) => void
}): ReactElement {
return (
<div className="flex flex-col gap-[3px]">
<div className="grid grid-cols-[minmax(76px,max-content)_minmax(0,1fr)] gap-x-3 gap-y-[3px] *:col-span-full">
{rows.map((row, index) => {
const layout = subRowsLayout(row)
const id = propertyRowId(blockId, index)
@@ -152,12 +152,12 @@ export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
const Chevron = folded ? ChevronRight : ChevronDown
return (
<Fragment key={index}>
<div className="cr-prop-row flex gap-3" data-id={id}>
<div className="cr-prop-row grid grid-cols-subgrid" data-id={id}>
{layout
? (
<button
type="button"
className="cr-prop-label group flex h-5 w-[76px] shrink-0 items-center gap-1 rounded-sm"
className="cr-prop-label group flex h-5 items-center gap-1 rounded-sm"
aria-label={`${folded ? '展开' : '折叠'}${row.label}`}
aria-expanded={!folded}
onClick={() => onToggleFold(id)}
@@ -166,8 +166,8 @@ export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
{row.label}
</button>
)
: <span className="cr-prop-label flex h-5 w-[76px] shrink-0 items-center">{row.label}</span>}
<TextPreview text={row.value} className="min-w-0 flex-1" />
: <span className="cr-prop-label flex h-5 items-center">{row.label}</span>}
<TextPreview text={row.value} className="min-w-0" />
</div>
{!folded && layout === 'table' && <PropertyTable parentId={id} columns={row.columns ?? []} items={row.items ?? []} />}
{!folded && layout === 'list' && <PropertyItems parentId={id} items={row.items ?? []} folding={{ collapsed, onToggleFold }} />}