🐛 App tile flex fix (#1255)

* 🎨 flex

* 🎨 Improved flex organization on app tile

* ✏️ disallowAppNameProgagation to Propagation

* ✨ User customizable lineclamp and config migration

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -1,10 +1,9 @@
-import { Box, Flex, Text, Tooltip, UnstyledButton } from '@mantine/core';
+import { Affix, Box, Text, Tooltip, UnstyledButton } from '@mantine/core';
 import { createStyles, useMantineTheme } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 
 import { AppType } from '../../../../types/app';
-import { useCardStyles } from '../../../layout/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';
@@ -17,89 +16,70 @@ interface AppTileProps extends BaseTileProps {
 
 export const AppTile = ({ className, app }: AppTileProps) => {
   const isEditMode = useEditModeStore((x) => x.enabled);
-
   const { cx, classes } = useStyles();
-
   const { colorScheme } = useMantineTheme();
-
   const tooltipContent = [
-    app.appearance.appNameStatus === "hover" ? app.name : undefined,
-    app.behaviour.tooltipDescription
-  ].filter( e => e ).join( ': ' );
+    app.appearance.appNameStatus === 'hover' ? app.name : undefined,
+    app.behaviour.tooltipDescription,
+  ]
+    .filter((e) => e)
+    .join(': ');
 
-  const {
-    classes: { card: cardClass },
-  } = useCardStyles(false);
+  const isRow = app.appearance.positionAppName.includes('row');
 
   function Inner() {
     return (
       <Tooltip.Floating
         label={tooltipContent}
         position="right-start"
-        c={ colorScheme === 'light' ? "black" : "dark.0" }
-        color={ colorScheme === 'light' ? "gray.2" : "dark.4" }
+        c={colorScheme === 'light' ? 'black' : 'dark.0'}
+        color={colorScheme === 'light' ? 'gray.2' : 'dark.4'}
         multiline
-        disabled={tooltipContent === ''}
-        styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+        disabled={!tooltipContent}
+        styles={{ tooltip: { maxWidth: 300 } }}
       >
-        <Flex
-          m={0}
-          p={0}
-          justify="space-around"
-          align="center"
+        <Box
+          className={`${classes.base} ${cx(classes.appContent, 'dashboard-tile-app')}`}
           h="100%"
-          w="100%"
-          className="dashboard-tile-app"
-          direction={app.appearance.positionAppName ?? 'column'}
+          sx={{
+            flexFlow: app.appearance.positionAppName ?? 'column',
+          }}
         >
-          <Box w="100%" hidden={["hover", "hidden"].includes(app.appearance.appNameStatus)}>
-            <Text
-              w="100%"
-              size="md"
-              ta="center"
-              weight={700}
-              className={cx(classes.appName, 'dashboard-tile-app-title')}
-              lineClamp={1}
-            >
-              {app.name}
-            </Text>
-          </Box>
-          <Box
-            w="100%"
-            h="100%"
-            display="flex"
+        {app.appearance.appNameStatus === 'normal' && (
+          <Text
+            className={cx(classes.appName, 'dashboard-tile-app-title')}
+            fw={700}
+            size="md"
+            ta="center"
             sx={{
-              alignContent: 'center',
-              justifyContent: 'center',
-              flex: '1 1 auto',
-              flexWrap: 'wrap',
+              flex: isRow ? '1' : undefined,
             }}
+            lineClamp={app.appearance.lineClampAppName}
           >
-            <motion.img
-              className={classes.image}
-              height="85%"
-              style={{
-                objectFit: 'contain',
-              }}
-              src={app.appearance.iconUrl}
-              alt={app.name}
-              whileHover={{
-                scale: 1.2,
-                transition: { duration: 0.2 },
-              }}
-            />
-          </Box>
-        </Flex>
+            {app.name}
+          </Text>
+        )}
+          <motion.img
+            className={cx(classes.appImage, 'dashboard-tile-app-image')}
+            src={app.appearance.iconUrl}
+            alt={app.name}
+            whileHover={{ scale: 1 }}
+            initial={{ scale: 0.9 }}
+            style={{
+              width: isRow ? 0 : undefined,
+            }}
+          />
+        </Box>
       </Tooltip.Floating>
     );
   }
 
   return (
-    <HomarrCardWrapper className={className}>
+    <HomarrCardWrapper className={className} p={10}>
       <AppMenu app={app} />
       {!app.url || isEditMode ? (
         <UnstyledButton
-          className={classes.button}
+          className={`${classes.button} ${classes.base}`}
           style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
         >
           <Inner />
@@ -110,7 +90,7 @@ export const AppTile = ({ className, app }: AppTileProps) => {
           component={Link}
           href={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url}
           target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'}
-          className={cx(classes.button)}
+          className={`${classes.button} ${classes.base}`}
         >
           <Inner />
         </UnstyledButton>
@@ -121,19 +101,27 @@ export const AppTile = ({ className, app }: AppTileProps) => {
 };
 
 const useStyles = createStyles((theme, _params, getRef) => ({
-  image: {
-    maxHeight: '90%',
-    maxWidth: '90%',
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  appContent: {
+    gap: 0,
+    overflow: 'visible',
+    flexGrow: 5,
   },
   appName: {
     wordBreak: 'break-word',
   },
+  appImage: {
+    flex: '1',
+    objectFit: 'contain',
+    overflowY: 'auto',
+  },
   button: {
     height: '100%',
     width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
     gap: 4,
   },
 }));