From 418af0594351732e423c33f911d44c902f75aeb5 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 9 Sep 2024 22:31:29 +0200
Subject: [PATCH] Handle long theme names

---
 src/components/atoms/TypographyMaxLines.tsx        |  1 +
 .../appearance/theme/CreateThemeButton.tsx         | 14 +++++++++-----
 .../settings/appearance/theme/ThemeList.tsx        |  4 +++-
 .../settings/appearance/theme/ThemePreview.tsx     |  6 ++++--
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/atoms/TypographyMaxLines.tsx b/src/components/atoms/TypographyMaxLines.tsx
index d0ffbbd5..24631775 100644
--- a/src/components/atoms/TypographyMaxLines.tsx
+++ b/src/components/atoms/TypographyMaxLines.tsx
@@ -21,4 +21,5 @@ export const TypographyMaxLines = styled(Typography, {
     WebkitBoxOrient: 'vertical',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    overflowWrap: 'break-word',
 })) as React.FC<TypographyProps & { lines?: number }>;
diff --git a/src/screens/settings/appearance/theme/CreateThemeButton.tsx b/src/screens/settings/appearance/theme/CreateThemeButton.tsx
index 7d4af376..5930eca4 100644
--- a/src/screens/settings/appearance/theme/CreateThemeButton.tsx
+++ b/src/screens/settings/appearance/theme/CreateThemeButton.tsx
@@ -7,12 +7,13 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
+import Tooltip from '@mui/material/Tooltip';
 import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
+import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
 
 export const CreateThemeButton = () => {
     const { t } = useTranslation();
@@ -21,11 +22,10 @@ export const CreateThemeButton = () => {
 
     return (
         <>
-            <Stack sx={{ alignItems: 'center', gap: 1 }}>
+            <Stack sx={{ alignItems: 'center', gap: 1, minWidth: '150px', maxWidth: '150px' }}>
                 <Button
                     sx={{
-                        minWidth: '150px',
-                        maxWidth: '150px',
+                        width: '100%',
                         height: '225px',
                     }}
                     variant="contained"
@@ -34,7 +34,11 @@ export const CreateThemeButton = () => {
                 >
                     <AddCircleIcon />
                 </Button>
-                <Typography>{t('settings.appearance.theme.create.title')}</Typography>
+                <Tooltip title={t('settings.appearance.theme.create.title')} placement="top">
+                    <TypographyMaxLines sx={{ maxWidth: '100%' }}>
+                        {t('settings.appearance.theme.create.title')}
+                    </TypographyMaxLines>
+                </Tooltip>
             </Stack>
             {popupState.isOpen && <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="create" />}
         </>
diff --git a/src/screens/settings/appearance/theme/ThemeList.tsx b/src/screens/settings/appearance/theme/ThemeList.tsx
index 906301ee..ae60dbf1 100644
--- a/src/screens/settings/appearance/theme/ThemeList.tsx
+++ b/src/screens/settings/appearance/theme/ThemeList.tsx
@@ -60,7 +60,9 @@ export const ThemeList = () => {
     }
 
     return (
-        <Stack sx={{ flexDirection: 'row', flexWrap: 'no-wrap', overflowX: 'auto', gap: 1, mx: 2 }}>
+        <Stack
+            sx={{ flexDirection: 'row', flexWrap: 'no-wrap', alignItems: 'start', overflowX: 'auto', gap: 1, mx: 2 }}
+        >
             <CreateThemeButton />
             {allThemes.map((theme) => (
                 <ThemePreview
diff --git a/src/screens/settings/appearance/theme/ThemePreview.tsx b/src/screens/settings/appearance/theme/ThemePreview.tsx
index 4cf64a66..fff49e78 100644
--- a/src/screens/settings/appearance/theme/ThemePreview.tsx
+++ b/src/screens/settings/appearance/theme/ThemePreview.tsx
@@ -9,7 +9,6 @@
 import { useTranslation } from 'react-i18next';
 import { useContext, useMemo } from 'react';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import { styled, ThemeProvider } from '@mui/material/styles';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -25,6 +24,7 @@ import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/lib/ui/AppThemes.ts
 import { createTheme } from '@/theme.ts';
 import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
 import { makeToast } from '@/components/util/Toast';
+import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
 
 const ThemePreviewBadge = styled(Box)(() => ({
     width: '15px',
@@ -208,7 +208,9 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
                         </CardActionArea>
                     </Card>
                 </ThemeProvider>
-                <Typography>{getName()}</Typography>
+                <Tooltip title={getName()} placement="top">
+                    <TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
+                </Tooltip>
             </Stack>
             <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={theme} />
         </>