Fix host filter overflow on small displays

This commit is contained in:
Reckless_Satoshi 2024-01-24 13:25:51 +00:00
parent bee30eafa9
commit edbc290fb4
No known key found for this signature in database
GPG Key ID: 9C4585B561315571

View File

@ -316,61 +316,63 @@ const BookControl = ({
) : null} ) : null}
{width > large ? ( {width > large ? (
<Grid item sx={{ position: 'relative', top: '0.5em' }}> <>
<Typography variant='caption' color='text.secondary'> <Grid item sx={{ position: 'relative', top: '0.5em' }}>
{fav.currency === 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('hosted by')} <Typography variant='caption' color='text.secondary'>
</Typography> {fav.currency === 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('hosted by')}
</Grid> </Typography>
) : null} </Grid>
<Grid item> <Grid item>
<Select <Select
autoWidth autoWidth
sx={{ sx={{
height: '2.3em', height: '2.3em',
border: '0.5px solid', border: '0.5px solid',
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
borderRadius: '4px', borderRadius: '4px',
borderColor: 'text.disabled', borderColor: 'text.disabled',
'&:hover': { '&:hover': {
borderColor: 'text.primary', borderColor: 'text.primary',
}, },
}} }}
size='small' size='small'
label={t('Select Host')} label={t('Select Host')}
required={true} required={true}
value={fav.coordinator} value={fav.coordinator}
inputProps={{ inputProps={{
style: { textAlign: 'center' }, style: { textAlign: 'center' },
}} }}
onChange={handleHostChange} onChange={handleHostChange}
> >
<MenuItem value='any'> <MenuItem value='any'>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<FlagWithProps code='ANY' />
</div>
</MenuItem>
{Object.values(federation.coordinators).map((coordinator) =>
coordinator.enabled ? (
<MenuItem
key={coordinator.shortAlias}
value={coordinator.shortAlias}
color='text.secondary'
>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}> <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<RobotAvatar <FlagWithProps code='ANY' />
shortAlias={coordinator.shortAlias}
style={{ width: '1.55em', height: '1.55em' }}
smooth={true}
small={true}
/>
</div> </div>
</MenuItem> </MenuItem>
) : ( {Object.values(federation.coordinators).map((coordinator) =>
<></> coordinator.enabled ? (
), <MenuItem
)} key={coordinator.shortAlias}
</Select> value={coordinator.shortAlias}
</Grid> color='text.secondary'
>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<RobotAvatar
shortAlias={coordinator.shortAlias}
style={{ width: '1.55em', height: '1.55em' }}
smooth={true}
small={true}
/>
</div>
</MenuItem>
) : (
<></>
),
)}
</Select>
</Grid>
</>
) : null}
</Grid> </Grid>
<Divider /> <Divider />
</Box> </Box>