Use Panel instead of Box in boards.

This commit is contained in:
Mike Cao 2026-02-13 00:00:51 -08:00
parent 029814f81f
commit 0123f7069b

View file

@ -1,5 +1,6 @@
import { Box, Button, Column, Focusable, ListItem, Row, Select, Text } from '@umami/react-zen'; import { Button, Column, Focusable, ListItem, Row, Select, Text } from '@umami/react-zen';
import { useState } from 'react'; import { useState } from 'react';
import { Panel } from '@/components/common/Panel';
import { useMessages } from '@/components/hooks'; import { useMessages } from '@/components/hooks';
import type { BoardComponentConfig } from '@/lib/types'; import type { BoardComponentConfig } from '@/lib/types';
import { import {
@ -112,7 +113,7 @@ export function BoardComponentSelect({
</Column> </Column>
<Column gap="3" flexGrow={1} style={{ minWidth: 0 }}> <Column gap="3" flexGrow={1} style={{ minWidth: 0 }}>
{selectedDef?.configFields && selectedDef.configFields.length > 0 && ( {selectedDef?.configFields && selectedDef.configFields.length > 0 && (
<Row gap="3" alignItems="center" flexWrap="wrap"> <Row gap="3" alignItems="center" wrap="wrap">
{selectedDef.configFields.map((field: ConfigField) => ( {selectedDef.configFields.map((field: ConfigField) => (
<Row key={field.name} gap="2" alignItems="center"> <Row key={field.name} gap="2" alignItems="center">
<Text size="sm" color="muted"> <Text size="sm" color="muted">
@ -134,14 +135,7 @@ export function BoardComponentSelect({
))} ))}
</Row> </Row>
)} )}
<Box <Panel maxHeight="100%">
flexGrow={1}
border
borderRadius
overflow="auto"
position="relative"
style={{ minHeight: 0 }}
>
{previewConfig && websiteId ? ( {previewConfig && websiteId ? (
<BoardComponentRenderer config={previewConfig} websiteId={websiteId} /> <BoardComponentRenderer config={previewConfig} websiteId={websiteId} />
) : ( ) : (
@ -151,10 +145,10 @@ export function BoardComponentSelect({
</Text> </Text>
</Column> </Column>
)} )}
</Box> </Panel>
</Column> </Column>
</Row> </Row>
<Row justifyContent="flex-end" gap="2" paddingTop="4" border="top"> <Row justifyContent="flex-end" gap="2" paddingTop="4">
<Button variant="quiet" onPress={onClose}> <Button variant="quiet" onPress={onClose}>
{t(labels.cancel)} {t(labels.cancel)}
</Button> </Button>