Card styling

src/components/AppShelf/AppShelfItem.tsx

@@ -105,14 +105,14 @@ export function AppShelfItem(props: any) {
             <AppShelfMenu service={service} />
           </motion.div>
         </Card.Section>
-        <Center>
-          <Card.Section>
+        <Card.Section>
+          <Center>
             <AspectRatio
               ratio={3 / 5}
-              m="xl"
+              m="lg"
               style={{
-                width: 150,
-                height: 90,
+                height: 75 * ((config.settings.appCardWidth ?? 1) * 1.2),
+                width: 75 * ((config.settings.appCardWidth ?? 1) * 2),
               }}
             >
               <motion.i
@@ -126,8 +126,8 @@ export function AppShelfItem(props: any) {
                 >
                   <Image
                     styles={{ root: { cursor: 'pointer' } }}
-                    width={80}
-                    height={80}
+                    width={75 * ((config.settings.appCardWidth ?? 1) * 1.2)}
+                    height={75 * ((config.settings.appCardWidth ?? 1) * 1.2)}
                     src={service.icon}
                     fit="contain"
                   />
@@ -135,8 +135,8 @@ export function AppShelfItem(props: any) {
               </motion.i>
             </AspectRatio>
             {service.ping !== false && <PingComponent url={service.url} status={service.status} />}
-          </Card.Section>
-        </Center>
+          </Center>
+        </Card.Section>
       </Card>
     </motion.div>
   );