🐛 fix(vscode): 代码阅读属性表的属性名一列按这张表里最长的名字放宽,长名字不再压到值上
This commit is contained in:
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
|
onToggleFold: (id: string) => void
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
return (
|
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) => {
|
{rows.map((row, index) => {
|
||||||
const layout = subRowsLayout(row)
|
const layout = subRowsLayout(row)
|
||||||
const id = propertyRowId(blockId, index)
|
const id = propertyRowId(blockId, index)
|
||||||
@@ -152,12 +152,12 @@ export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
|
|||||||
const Chevron = folded ? ChevronRight : ChevronDown
|
const Chevron = folded ? ChevronRight : ChevronDown
|
||||||
return (
|
return (
|
||||||
<Fragment key={index}>
|
<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
|
{layout
|
||||||
? (
|
? (
|
||||||
<button
|
<button
|
||||||
type="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-label={`${folded ? '展开' : '折叠'}${row.label}`}
|
||||||
aria-expanded={!folded}
|
aria-expanded={!folded}
|
||||||
onClick={() => onToggleFold(id)}
|
onClick={() => onToggleFold(id)}
|
||||||
@@ -166,8 +166,8 @@ export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
|
|||||||
{row.label}
|
{row.label}
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
: <span className="cr-prop-label flex h-5 w-[76px] shrink-0 items-center">{row.label}</span>}
|
: <span className="cr-prop-label flex h-5 items-center">{row.label}</span>}
|
||||||
<TextPreview text={row.value} className="min-w-0 flex-1" />
|
<TextPreview text={row.value} className="min-w-0" />
|
||||||
</div>
|
</div>
|
||||||
{!folded && layout === 'table' && <PropertyTable parentId={id} columns={row.columns ?? []} items={row.items ?? []} />}
|
{!folded && layout === 'table' && <PropertyTable parentId={id} columns={row.columns ?? []} items={row.items ?? []} />}
|
||||||
{!folded && layout === 'list' && <PropertyItems parentId={id} items={row.items ?? []} folding={{ collapsed, onToggleFold }} />}
|
{!folded && layout === 'list' && <PropertyItems parentId={id} items={row.items ?? []} folding={{ collapsed, onToggleFold }} />}
|
||||||
|
|||||||
Reference in new issue
Block a user