From b503ab07e9a4dc275996ce9d393c1996f27e4971 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 25 Apr 2025 00:27:28 +0200
Subject: [PATCH] Fix source/extension repo url word break

---
 .../extension/components/ExtensionCard.tsx    |  36 +----
 src/modules/source/components/SourceCard.tsx  | 145 ++++++++----------
 2 files changed, 67 insertions(+), 114 deletions(-)

diff --git a/src/modules/extension/components/ExtensionCard.tsx b/src/modules/extension/components/ExtensionCard.tsx
index 27901b09..d91ef051 100644
--- a/src/modules/extension/components/ExtensionCard.tsx
+++ b/src/modules/extension/components/ExtensionCard.tsx
@@ -12,10 +12,10 @@ import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
 import SettingsIcon from '@mui/icons-material/Settings';
+import Stack from '@mui/material/Stack';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
@@ -147,49 +147,27 @@ export function ExtensionCard(props: IProps) {
                         src={requestManager.getValidImgUrlFor(iconUrl)}
                     />
                 </Avatar>
-                <Box
+                <Stack
                     sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
+                        justifyContent: 'center',
                         flexGrow: 1,
                         flexShrink: 1,
                         wordBreak: 'break-word',
-                        justifyContent: 'center',
                     }}
                 >
                     <Typography variant="h6" component="h3">
                         {name}
                     </Typography>
-                    <Typography
-                        variant="caption"
-                        sx={{
-                            display: 'block',
-                        }}
-                    >
+                    <Typography variant="caption">
                         {langPress} {versionName}
                         {isNsfw && (
-                            <Typography
-                                variant="caption"
-                                color="error"
-                                sx={{
-                                    display: 'inline',
-                                }}
-                            >
+                            <Typography variant="caption" color="error">
                                 {' 18+'}
                             </Typography>
                         )}
                     </Typography>
-                    {showSourceRepo && (
-                        <Typography
-                            variant="caption"
-                            sx={{
-                                display: 'block',
-                            }}
-                        >
-                            {repo}
-                        </Typography>
-                    )}
-                </Box>
+                    {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
+                </Stack>
                 {isInstalled && (
                     <CustomTooltip title={t('settings.title')}>
                         <IconButton onClick={showOptions} color="inherit">
diff --git a/src/modules/source/components/SourceCard.tsx b/src/modules/source/components/SourceCard.tsx
index 2248ee23..78db6721 100644
--- a/src/modules/source/components/SourceCard.tsx
+++ b/src/modules/source/components/SourceCard.tsx
@@ -7,7 +7,6 @@
  */
 
 import CardActionArea from '@mui/material/CardActionArea';
-import Box from '@mui/material/Box';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
@@ -65,95 +64,71 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                 <CardContent
                     sx={{
                         display: 'flex',
-                        justifyContent: 'space-between',
                         alignItems: 'center',
-                        padding: 1.5,
+                        gap: 1,
+                        p: 1.5,
                     }}
                 >
-                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                        <Avatar
-                            variant="rounded"
+                    <Avatar
+                        variant="rounded"
+                        alt={sourceName}
+                        sx={{
+                            width: 56,
+                            height: 56,
+                            flex: '0 0 auto',
+                            background: 'transparent',
+                        }}
+                    >
+                        <SpinnerImage
+                            spinnerStyle={{ small: true }}
+                            imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
                             alt={sourceName}
-                            sx={{
-                                width: 56,
-                                height: 56,
-                                flex: '0 0 auto',
-                                mr: 1,
-                                background: 'transparent',
-                            }}
-                        >
-                            <SpinnerImage
-                                spinnerStyle={{ small: true }}
-                                imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
-                                alt={sourceName}
-                                src={requestManager.getValidImgUrlFor(iconUrl)}
-                            />
-                        </Avatar>
-                        <Box
-                            sx={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <Typography variant="h6" component="h3">
-                                {sourceName}
-                            </Typography>
-                            <Typography
-                                variant="caption"
-                                sx={{
-                                    display: 'block',
-                                }}
-                            >
-                                {translateExtensionLanguage(lang)}
-                                {isNsfw && (
-                                    <Typography
-                                        variant="caption"
-                                        color="error"
-                                        sx={{
-                                            display: 'inline',
-                                        }}
-                                    >
-                                        {' 18+'}
-                                    </Typography>
-                                )}
-                                {showSourceRepo && (
-                                    <Typography
-                                        variant="caption"
-                                        sx={{
-                                            display: 'block',
-                                        }}
-                                    >
-                                        {repo}
-                                    </Typography>
-                                )}
-                            </Typography>
-                        </Box>
-                    </Box>
-                    <Stack sx={{ flexDirection: 'row', gap: 1 }}>
-                        {supportsLatest && (
-                            <Button
-                                {...MUIUtil.preventRippleProp()}
-                                variant="outlined"
-                                component={Link}
-                                to={AppRoutes.sources.childRoutes.browse.path(id)}
-                                state={{ contentType: SourceContentType.LATEST, clearCache: true }}
-                            >
-                                {t('global.button.latest')}
-                            </Button>
-                        )}
-                        {!isMobileWidth && (
-                            <Button
-                                {...MUIUtil.preventRippleProp()}
-                                variant="outlined"
-                                component={Link}
-                                to={AppRoutes.sources.childRoutes.browse.path(id)}
-                                state={{ contentType: SourceContentType.POPULAR, clearCache: true }}
-                            >
-                                {t('global.button.popular')}
-                            </Button>
-                        )}
+                            src={requestManager.getValidImgUrlFor(iconUrl)}
+                        />
+                    </Avatar>
+                    <Stack
+                        sx={{
+                            justifyContent: 'center',
+                            flexGrow: 1,
+                            flexShrink: 1,
+                            wordBreak: 'break-word',
+                        }}
+                    >
+                        <Typography variant="h6" component="h3">
+                            {sourceName}
+                        </Typography>
+                        <Typography variant="caption">
+                            {translateExtensionLanguage(lang)}
+                            {isNsfw && (
+                                <Typography variant="caption" color="error">
+                                    {' 18+'}
+                                </Typography>
+                            )}
+                        </Typography>
+                        {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
                     </Stack>
+                    {supportsLatest && (
+                        <Button
+                            {...MUIUtil.preventRippleProp()}
+                            variant="outlined"
+                            component={Link}
+                            to={AppRoutes.sources.childRoutes.browse.path(id)}
+                            state={{ contentType: SourceContentType.LATEST, clearCache: true }}
+                        >
+                            {t('global.button.latest')}
+                        </Button>
+                    )}
+                    {!isMobileWidth && (
+                        <Button
+                            {...MUIUtil.preventRippleProp()}
+                            variant="outlined"
+                            component={Link}
+                            to={AppRoutes.sources.childRoutes.browse.path(id)}
+                            state={{ contentType: SourceContentType.POPULAR, clearCache: true }}
+                        >
+                            {t('global.button.popular')}
+                        </Button>
+                    )}
                 </CardContent>
             </CardActionArea>
         </Card>