prevent overflow on small displays

This commit is contained in:
Gimle Larpes 2025-07-25 02:15:41 +02:00
parent 77b551d004
commit 2b66d13ea1

View file

@ -371,112 +371,114 @@ function DateHint({ hasChanges, handleReset }: DateHintProps) {
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu> <Menu style={{ maxHeight: '85vh', overflowY: 'auto' }}>
<Header size="300" style={{ padding: `0 ${config.space.S200}` }}> <Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
<Text size="L400">Formatting</Text> <Text size="L400">Formatting</Text>
</Header> </Header>
<Box style={categoryPadding} direction="Column"> <Box direction="Column">
<Header size="300"> <Box style={categoryPadding} direction="Column">
<Text size="L400">Year</Text> <Header size="300">
</Header> <Text size="L400">Year</Text>
<Box direction="Column" tabIndex={0} gap="100"> </Header>
<Text size="T300"> <Box direction="Column" tabIndex={0} gap="100">
YY <Text size="T300">
<Text as="span" size="Inherit" priority="300"> YY
{': '} <Text as="span" size="Inherit" priority="300">
Two-digit year {': '}
</Text>{' '} Two-digit year
</Text> </Text>{' '}
<Text size="T300">
YYYY
<Text as="span" size="Inherit" priority="300">
{': '}Four-digit year
</Text> </Text>
</Text> <Text size="T300">
YYYY
<Text as="span" size="Inherit" priority="300">
{': '}Four-digit year
</Text>
</Text>
</Box>
</Box> </Box>
</Box>
<Box style={categoryPadding} direction="Column"> <Box style={categoryPadding} direction="Column">
<Header size="300"> <Header size="300">
<Text size="L400">Month</Text> <Text size="L400">Month</Text>
</Header> </Header>
<Box direction="Column" tabIndex={0} gap="100"> <Box direction="Column" tabIndex={0} gap="100">
<Text size="T300"> <Text size="T300">
M M
<Text as="span" size="Inherit" priority="300"> <Text as="span" size="Inherit" priority="300">
{': '}The month {': '}The month
</Text>
</Text> </Text>
</Text> <Text size="T300">
<Text size="T300"> MM
MM <Text as="span" size="Inherit" priority="300">
<Text as="span" size="Inherit" priority="300"> {': '}Two-digit month
{': '}Two-digit month </Text>{' '}
</Text>{' '}
</Text>
<Text size="T300">
MMM
<Text as="span" size="Inherit" priority="300">
{': '}Short month name
</Text> </Text>
</Text> <Text size="T300">
<Text size="T300"> MMM
MMMM <Text as="span" size="Inherit" priority="300">
<Text as="span" size="Inherit" priority="300"> {': '}Short month name
{': '}Full month name </Text>
</Text> </Text>
</Text> <Text size="T300">
MMMM
<Text as="span" size="Inherit" priority="300">
{': '}Full month name
</Text>
</Text>
</Box>
</Box> </Box>
</Box>
<Box style={categoryPadding} direction="Column"> <Box style={categoryPadding} direction="Column">
<Header size="300"> <Header size="300">
<Text size="L400">Day of the Month</Text> <Text size="L400">Day of the Month</Text>
</Header> </Header>
<Box direction="Column" tabIndex={0} gap="100"> <Box direction="Column" tabIndex={0} gap="100">
<Text size="T300"> <Text size="T300">
D D
<Text as="span" size="Inherit" priority="300"> <Text as="span" size="Inherit" priority="300">
{': '}Day of the month {': '}Day of the month
</Text>
</Text> </Text>
</Text> <Text size="T300">
<Text size="T300"> DD
DD <Text as="span" size="Inherit" priority="300">
<Text as="span" size="Inherit" priority="300"> {': '}Two-digit day of the month
{': '}Two-digit day of the month </Text>
</Text> </Text>
</Text> </Box>
</Box> </Box>
</Box> <Box style={categoryPadding} direction="Column">
<Box style={categoryPadding} direction="Column"> <Header size="300">
<Header size="300"> <Text size="L400">Day of the Week</Text>
<Text size="L400">Day of the Week</Text> </Header>
</Header> <Box direction="Column" tabIndex={0} gap="100">
<Box direction="Column" tabIndex={0} gap="100"> <Text size="T300">
<Text size="T300"> d
d <Text as="span" size="Inherit" priority="300">
<Text as="span" size="Inherit" priority="300"> {': '}Day of the week (Sunday = 0)
{': '}Day of the week (Sunday = 0) </Text>
</Text> </Text>
</Text> <Text size="T300">
<Text size="T300"> dd
dd <Text as="span" size="Inherit" priority="300">
<Text as="span" size="Inherit" priority="300"> {': '}Two-letter day name
{': '}Two-letter day name </Text>
</Text> </Text>
</Text> <Text size="T300">
<Text size="T300"> ddd
ddd <Text as="span" size="Inherit" priority="300">
<Text as="span" size="Inherit" priority="300"> {': '}Short day name
{': '}Short day name </Text>
</Text> </Text>
</Text> <Text size="T300">
<Text size="T300"> dddd
dddd <Text as="span" size="Inherit" priority="300">
<Text as="span" size="Inherit" priority="300"> {': '}Full day name
{': '}Full day name </Text>
</Text> </Text>
</Text> </Box>
</Box> </Box>
</Box> </Box>
</Menu> </Menu>