Style updates

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

@@ -6,16 +6,33 @@ import { stackClasses, textClasses } from 'styles';
 
 function AppItem({ url, icon, name }: any) {
 	const [textDecoration, setTextDecoration] = useState<string>('none');
+	const [hover, setHover] = useState<boolean>(false);
 	const { isMobile } = useCommonHooks();
 
 	return (
 		<Box
 			component='a'
 			href={`https://${url}`}
-			onMouseOver={() => setTextDecoration('underline')}
-			onMouseOut={() => setTextDecoration('none')}
+			onMouseOver={() => {
+				setTextDecoration('underline');
+				setHover(true);
+			}}
+			onMouseOut={() => {
+				setTextDecoration('none');
+				setHover(false);
+			}}
 			className={stackClasses.appItemBox}
 		>
+			{hover && (
+				<svg
+					style={{ position: 'absolute', borderRadius: '6px' }}
+					height='100%'
+					width='100%'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
+				</svg>
+			)}
 			<Stack
 				align={isMobile ? 'center' : undefined}
 				justify={isMobile ? 'center' : undefined}

src/pages/homepage/components/Bookmarks/LinkItem.tsx

@@ -9,6 +9,7 @@ function LinkItem({ link }: any) {
 			component='a'
 			href={link.url}
 			style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+			w={'min-content'}
 		>
 			{link.name}
 		</Text>