interface Props {
    billId?: string;
    kangarooId?: number;
    title: string;
    setToggled: Dispatch<SetStateAction<boolean>>;
    toggled: boolean;
}

function EventlogPanel({ billId = null, kangarooId = null, title, setToggled, toggled }: Props) {
    const eventlogs = useGetEventlogs({
        KangarooId: kangarooId,
        RenovoBillId: billId,
    });
    const [searchFilter, setSearchFilter] = useState('');

    const closeModal = () => {
        setToggled(false);
    };

    const tableData: Eventlog[] = useMemo(
        () => (eventlogs.data ? eventlogs.data : []),
        [eventlogs.data]
    );

    const tableColumns: Column<Eventlog>[] = useMemo(() => {
        return [
            {
                Header: 'Timestamp',
                accessor: 'Timestamp',
                Cell: ({ value }) => moment.utc(value).local().format('LLL'),
            },
            {
                Header: 'Application',
                accessor: 'Application',
            },
            {
                Header: 'Ids',
                accessor: 'TransactionId',
                Cell: ({ row: { original } }) => {
                    const idEntries = [
                        { label: 'Transaction', value: original.TransactionId, color: 'primary' },
                        { label: 'PHS', value: original.PHSBillId, color: 'info' },
                        { label: 'Kangaroo', value: original.KangarooJobId, color: 'danger' },
                        { label: 'Backhoe', value: original.BackhoeJobId, color: 'success' },
                        { label: 'Renovo', value: original.RenovoBillId, color: 'warning' },
                        { label: 'Other', value: original.OtherReferenceId, color: 'secondary' },
                    ];

                    return (
                        <div className="d-flex flex-wrap gap-2">
                            {idEntries
                                .filter(({ value }) => !!value)
                                .map(({ label, value, color }, idx) => (
                                    <div key={idx} className="d-flex align-items-center gap-1">
                                        <span className={`badge bg-${color}`}>{label}:</span>
                                        <span>{value}</span>
                                    </div>
                                ))}
                        </div>
                    );
                },
            },
            {
                Header: 'Message',
                accessor: 'Message',
            },
            {
                Header: 'Severity',
                accessor: 'Severity',
                Cell: ({ value }) => <EventlogSeverityBadge severity={value} />,
            },
            {
                accessor: 'JsonPayload',
                Cell: ({ row: { original } }) => {
                    const showJson = !!original.JsonPayload;
                    const showException = !!original.ExceptionData;
                    if (!showJson && !showException) return null;
                    return (
                        <>
                            {showJson && (
                                <EventlogViewModal key="json" eventlog={original} type="json" />
                            )}
                            {showException && (
                                <EventlogViewModal
                                    key="exception"
                                    eventlog={original}
                                    type="exception"
                                />
                            )}
                        </>
                    );
                },
            },
            {
                id: 'Search',
                accessor: (e) =>
                    e.Application +
                    e.Message +
                    GlobalEnums.AuditSeverity[e.Severity] +
                    e.BackhoeJobId +
                    e.KangarooJobId +
                    e.OtherReferenceId +
                    e.PHSBillId +
                    e.RenovoBillId +
                    e.TransactionId,
            },
        ];
    }, []);

    const hiddenColumns = useMemo(() => ['Search'], []);
    const filters = useMemo(() => [{ id: 'Search', value: searchFilter }], [searchFilter]);

    return (
        <Offcanvas
            direction="end"
            scrollable={true}
            backdrop={false}
            isOpen={toggled}
            style={{
                width: '80vw',
                height: '90vh',
                maxWidth: '80vw',
                maxHeight: '90vh',
            }}>
            <div
                style={{
                    overflowY: 'auto',
                    maxHeight: '100%',
                    paddingBottom: '10px',
                }}>
                <OffcanvasHeader className="bg-primary text-white" toggle={closeModal}>
                    <div className="d-flex align-items-baseline">
                        <span>{title}</span>
                    </div>
                </OffcanvasHeader>
                <Panel
                    testId="event-log-panel"
                    title=""
                    loading={eventlogs.isInitialLoading}
                    fetching={eventlogs.isFetching}
                    error={eventlogs.error?.message}>
                    <PanelContent testId="event-log-panel-content">
                        <Row className="mb-3">
                            <Col md={6} lg={4}>
                                <Input
                                    type="text"
                                    value={searchFilter}
                                    onChange={(e) => setSearchFilter(e.target.value)}
                                    placeholder="Search Event Logs"
                                />
                            </Col>
                        </Row>
                        <ReactTable
                            testId="event-log-table"
                            hover
                            columns={tableColumns}
                            data={tableData}
                            emptyTableMessage="No event logs found."
                            showFooter={true}
                            filters={filters}
                            hiddenColumns={hiddenColumns}
                        />
                    </PanelContent>
                </Panel>
            </div>
        </Offcanvas>
    );
}

export default EventlogPanel;

 I have an offcanvas that holds a reacttable. I want it to fit the screen well but not have tons of extra space or look awkward. What suggestions do you have?