Style bugfixes and updates

src/pages/homepage/components/Applications/AppItem.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
 import * as si from 'react-icons/si';
 import * as vsc from 'react-icons/vsc';
-import { stackClasses, textClasses } from 'styles';
+import { boxClasses, textClasses } from 'styles';
 
 function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
 	const allIcons: any = { ...fa6, ...vsc, ...si };
@@ -26,7 +26,8 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
 				setTextDecoration('none');
 				setHover(false);
 			}}
-			className={stackClasses.appItemBox}
+			className={boxClasses.appItemBox}
+			h={'64px'}
 		>
 			{hover && (
 				<svg
@@ -51,13 +52,12 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
 				{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
 			</Stack>
 			<Stack
+				justify='center'
 				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					justifyContent: 'center',
-					flex: 1,
 					overflow: 'hidden',
+					whiteSpace: 'nowrap',
 					gap: 0,
+					flex: 1,
 				}}
 			>
 				<Text className={textClasses.appName} classNames={textClasses}>

src/pages/homepage/components/Applications/Applications.tsx

@@ -41,20 +41,15 @@ function Applications({ contentType }: { contentType: string[] }) {
 	return (
 		<>
 			{applications.length > 0 && contentType.length > 0 && (
-				<Stack style={{ gap: 0 }}>
+				<Stack gap={0}>
 					<Text className={textClasses.sectionTitle} classNames={textClasses}>
 						Applications
 					</Text>
 					<Stack
 						style={{
 							gap: '.25rem',
-							backgroundSize: 'cover',
-							borderBottom: '0px solid',
 							display: 'grid',
-							gridColumnGap: '5px',
-							gridRowGap: '5px',
 							gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
-							gridTemplateRows: '64px',
 						}}
 					>
 						{applications