ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix ExtensionCard on smaller screens

Browse Source 
Due to the long repo urls which did not get broking down, the install/uninstall/... weren't visible depending on the screen size
This commit is contained in:
schroda
2024-07-13 03:05:58 +02:00
parent 40f4350cb8
commit fe8d87a536
1 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/ExtensionCard.tsx
View File

@@ -156,56 +156,60 @@ export function ExtensionCard(props: IProps) {
<CardContent <CardContent
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
gap: 2,
p: 2, p: 2,
'&:last-child': { '&:last-child': {
paddingBottom: 2, paddingBottom: 2,
}, },
}} }}
> >
<Box sx={{ display: 'flex', alignItems: 'center' }}> <Avatar
<Avatar variant="rounded"
variant="rounded" sx={{
sx={{ width: 56,
width: 56, height: 56,
height: 56, flex: '0 0 auto',
flex: '0 0 auto', background: 'transparent',
mr: 2, }}
background: 'transparent', alt={name}
}} >
<SpinnerImage
spinnerStyle={{ small: true }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
alt={name} alt={name}
> src={requestManager.getValidImgUrlFor(iconUrl)}
<SpinnerImage />
spinnerStyle={{ small: true }} </Avatar>
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }} <Box
alt={name} sx={{
src={requestManager.getValidImgUrlFor(iconUrl)} display: 'flex',
/> flexDirection: 'column',
</Avatar> flexGrow: 1,
<Box sx={{ display: 'flex', flexDirection: 'column' }}> flexShrink: 1,
<Typography variant="h5" component="h2"> wordBreak: 'break-word',
{name} }}
</Typography> >
<Typography variant="caption" display="block"> <Typography variant="h5" component="h2">
{langPress} {versionName} {name}
{isNsfw && ( </Typography>
<Typography variant="caption" display="inline" color="red"> <Typography variant="caption" display="block">
{' 18+'} {langPress} {versionName}
</Typography> {isNsfw && (
)} <Typography variant="caption" display="inline" color="red">
</Typography> {' 18+'}
{showSourceRepo && (
<Typography variant="caption" display="block">
{repo}
</Typography> </Typography>
)} )}
</Box> </Typography>
{showSourceRepo && (
<Typography variant="caption" display="block">
{repo}
</Typography>
)}
</Box> </Box>
<Button <Button
variant="outlined" variant="outlined"
sx={{ color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit' }} sx={{ color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit', flexShrink: 0 }}
onClick={() => handleButtonClick()} onClick={() => handleButtonClick()}
> >
{t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])} {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}