From fc5aca8379c687c804d3b4aed1ed9cc76754ac4b Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Thu, 19 Jan 2023 10:05:48 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Work=20on=20app=20tile=20d?=
 =?UTF-8?q?esign?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes Hide overflowing app names / option to hide app name #590
---
 .../Dashboard/Tiles/Apps/AppTile.tsx          | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
index ca945f81c..f25e1c125 100644
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/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}>
-          {app.name}
-        </Text>
-        <Center style={{ height: '85%', flex: 1, width: '85%' }}>
+        <Stack
+          m={0}
+          p={0}
+          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>
       </>
     );
   }