♻️ Work on app tile design

Fixes Hide overflowing app names / option to hide app name #590

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

@@ -1,4 +1,4 @@
-import { Center, Text, UnstyledButton } from '@mantine/core';
+import { Box, Stack, Title, UnstyledButton } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { createStyles } from '@mantine/styles';
 import { motion } from 'framer-motion';
@@ -26,23 +26,34 @@ export const AppTile = ({ className, app }: AppTileProps) => {
   function Inner() {
     return (
       <>
-        <Text align="center" weight={500} size="md" className={classes.appName}>
+        <Stack
-          {app.name}
+          m={0}
-        </Text>
+          p={0}
-        <Center style={{ height: '85%', flex: 1, width: '85%' }}>
+          spacing="xs"
+          justify="space-around"
+          align="center"
+          style={{ height: '100%', width: '100%' }}
+        >
+          <Box hidden={false}>
+            <Title order={5} size="md" ta="center" lineClamp={1} className={classes.appName}>
+              {app.name}
+            </Title>
+          </Box>
           <motion.img
             className={classes.image}
+            height="85%"
+            width="85%"
+            style={{
+              objectFit: 'contain',
+            }}
             src={app.appearance.iconUrl}
             alt={app.name}
             whileHover={{
               scale: 1.2,
               transition: { duration: 0.2 },
             }}
-            initial={{ opacity: 0, scale: 0.5 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.3 }}
           />
-        </Center>
+        </Stack>
       </>
     );
   }