admin: workaround for unstable ArrayField layout
Massimo Melina committed
May 2, 2026 at 15:59 UTC
902f1eedbdb73ded7dd86afce39f6f6730a338ec
2 files changed
+8
-2
admin/src/DataTable.ts
+1
-1
@@ -107,7 +107,7 @@ export function DataTable({
107
return ret
108
}, [columns, actions, actionsHeader, actionsLength, actionsProps, quickFilter])
109
const sizeGrid = useGetSize()
110
- const width = useDebounce(sizeGrid.w || 0, 500) // stabilize width
110
+ const width = useDebounce(sizeGrid.w || 0, 100) // stabilize width
111
const hideCols = useMemo(() => {
112
const fields = onlyTruthy(manipulatedColumns.map(({ field, hideUnder }) =>
113
(hideUnder === true || hideUnder && width < (typeof hideUnder === 'number' ? hideUnder : theme.breakpoints.values[hideUnder]))
admin/src/pluginOptions.ts
+7
-1
@@ -21,6 +21,8 @@ import { Account, account2icon } from './AccountsPage'
21
export async function showPluginOptions(row: any, maxWidth: string) {
22
const {id} = row
23
const { config: lastSaved } = await apiCall('get_plugin', { id })
24
+ // array fields contain a DataGrid whose intrinsic width settles in steps, so give the form a stable preferred width
25
+ const workaround = _.some(callable(row.config, lastSaved), { type: 'array' }) ? `min(100%, ${maxWidth})` : undefined
26
const apiRef = { current: undefined as FormApi | undefined }
27
// support css values without having to wrap in sx, as in DialogProps it only supports breakpoints
28
const showOptions = Boolean(row.config)
@@ -52,7 +54,11 @@ export async function showPluginOptions(row: any, maxWidth: string) {
54
})
55
let lastDate: any
56
return h(Flex, { alignItems: 'stretch', justifyContent: 'center', flexWrap: 'wrap', flexDirection: showOptions ? undefined : 'column' },
55
- h(Box, { sx: { maxWidth, minWidth: 'min-content' /*in case content requires more space (eg: reverse-proxy's table)*/ } }, children),
57
+ h(Box, { sx: {
58
+ maxWidth,
59
+ width: workaround,
60
+ minWidth: 'min-content', // in case content requires more space (eg: reverse-proxy's table)
61
+ } }, children),
62
h(Paper, { elevation: 1, sx: { position: 'relative', fontFamily: 'monospace', flex: 1, minWidth: 'min(40em, 90vw)', minHeight: '20em', px: .5 } },
63
h(Box, { sx: { my: .5, pb: .5, borderBottom: '1px solid', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
64
"Output",