Improve responsiveness and structure

src/components/Other.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading } from 'grommet';
+import { Box, Text } from 'grommet';
 
 import placeholder from '../assets/placeholder-music.jpg';
 
@@ -20,20 +20,13 @@ export const Other = ({
 	return (
 		<Box
 			round='xxsmall'
-			overflow='hidden'
-			align='center'
-			pad='small'
+			pad='xsmall'
 			onClick={() => handleClick(name)}
+			width='130px'
 		>
-			<Heading
-				level='4'
-				margin={{ bottom: 'small', top: 'small', left: 'small' }}
-			>
-				{name}
-			</Heading>
 			<Box
-				height='small'
-				width='small'
+				height='120px'
+				width='120px'
 				round='full'
 				background={{
 					repeat: 'no-repeat',
@@ -41,6 +34,14 @@ export const Other = ({
 					image: `url(${image})`,
 				}}
 			/>
+			<Text
+				margin={{ bottom: 'small', top: 'small', left: 'small' }}
+				textAlign='center'
+				weight='bold'
+				wordBreak='break-word'
+			>
+				{name}
+			</Text>
 		</Box>
 	);
 };