hii guys
Thanks in advance
I am creating a box that contains multiple data sets. I want the content inside the box to be scrollable. I have attached my code for reference — could you please review it, correct any issues, and guide me on how to achieve the desired scroll functionality?
import React, { useState } from ‘react’;
import {
Button,
Modal,
ModalBody,
Text,
Box,
Flex,
hubspot,
} from ‘@hubspot/ui-extensions’;
hubspot.extend(() => <Extension />);
const Extension = () => {
return (
<Button
overlay={
<Modal id=“scroll-modal” title=“Scrollable List” width=“md”>
<ModalBody>
<Box
direction=“column”
height=“400px” // ✅ Limit height of scrollable container
overflow=“auto” // ✅ Enable scroll
padding=“sm”
gap=“sm”
>
<ScrollableList />
</Box>
</ModalBody>
</Modal>
}
>
Open Scrollable Modal
</Button>
);
};
const ScrollableList = () => {
return (
<Box direction=“column” gap=“xs”>
{Array.from({ length: 100 }).map((_, i) => (
<Box key={i}>
<Text>Item {i + 1}</Text>
</Box>
))}
</Box>
);
};
