fix: correctly handle overflowing content

This commit is contained in:
iCrawl
2022-08-15 18:33:43 +02:00
parent 5dc7946df2
commit 35e79b389d
4 changed files with 16 additions and 8 deletions

View File

@@ -38,7 +38,7 @@ export function DocContainer({
return ( return (
<Stack> <Stack>
<Title order={2} ml="xs"> <Title order={2} ml="xs" className="break-all">
<Group> <Group>
{generateIcon(kind)} {generateIcon(kind)}
{name} {name}

View File

@@ -1,3 +1,4 @@
import { Box } from '@mantine/core';
import { HyperlinkedText } from './HyperlinkedText'; import { HyperlinkedText } from './HyperlinkedText';
import { Table } from './Table'; import { Table } from './Table';
import type { ParameterDocumentation } from '~/util/parse.server'; import type { ParameterDocumentation } from '~/util/parse.server';
@@ -15,5 +16,9 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
Type: 'font-mono', Type: 'font-mono',
}; };
return <Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />; return (
<Box className="overflow-x-auto">
<Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />
</Box>
);
} }

View File

@@ -123,7 +123,7 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
<Menu <Menu
onOpen={() => setOpenedPicker(true)} onOpen={() => setOpenedPicker(true)}
onClose={() => setOpenedPicker(false)} onClose={() => setOpenedPicker(false)}
radius="md" radius="xs"
width="target" width="target"
> >
<Menu.Target> <Menu.Target>

View File

@@ -1,3 +1,4 @@
import { Box } from '@mantine/core';
import { HyperlinkedText } from './HyperlinkedText'; import { HyperlinkedText } from './HyperlinkedText';
import { Table } from './Table'; import { Table } from './Table';
import type { TypeParameterData } from '~/util/parse.server'; import type { TypeParameterData } from '~/util/parse.server';
@@ -18,10 +19,12 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
}; };
return ( return (
<Table <Box className="overflow-x-auto">
columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']} <Table
rows={rows} columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
columnStyles={rowElements} rows={rows}
/> columnStyles={rowElements}
/>
</Box>
); );
} }