Fix ExtensionCard on smaller screens

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

View File

@@ -156,22 +156,20 @@ export function ExtensionCard(props: IProps) {
<CardContent
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: 2,
p: 2,
'&:last-child': {
paddingBottom: 2,
},
}}
>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
mr: 2,
background: 'transparent',
}}
alt={name}
@@ -183,7 +181,15 @@ export function ExtensionCard(props: IProps) {
src={requestManager.getValidImgUrlFor(iconUrl)}
/>
</Avatar>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
flexShrink: 1,
wordBreak: 'break-word',
}}
>
<Typography variant="h5" component="h2">
{name}
</Typography>
@@ -201,11 +207,9 @@ export function ExtensionCard(props: IProps) {
</Typography>
)}
</Box>
</Box>
<Button
variant="outlined"
sx={{ color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit' }}
sx={{ color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit', flexShrink: 0 }}
onClick={() => handleButtonClick()}
>
{t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}