Improve responsiveness and structure

src/components/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { Grommet, Heading } from 'grommet';
+import { Grommet } from 'grommet';
 import { debounce } from 'lodash';
 import { gql, useLazyQuery } from '@apollo/client';
 
@@ -50,7 +50,11 @@ export default function App() {
 
 	const handleSelect = (suggestion: string) => {
 		let updatedArtists: Artists = [];
-		let suggestedArtists: Artists = data.queryArtists.slice(0, 5);
+
+		let suggestedArtists: Artists = data.queryArtists
+			.slice(0, 5)
+			// Map to make a copy of the array, maybe uneeded
+			.map((artist: Artist) => artist);
 
 		// Find the selected artist and move it to index 0
 		for (let i = 0; i < suggestedArtists!.length; i++) {
@@ -96,11 +100,7 @@ export default function App() {
 
 	return (
 		<Grommet theme={theme}>
-			<Header>
+			<Header />
-				<Heading level='1' margin={{ vertical: 'small' }} color='light-1'>
-					Spoti Search
-				</Heading>
-			</Header>
 			<Search
 				inputValue={inputValue}
 				suggestions={suggestions}

src/components/Header.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
-import { Box } from 'grommet';
+import { Box, Text } from 'grommet';
 
-export const Header = (props: PropsWithChildren<{}>) => {
+export const Header = () => {
 	return (
 		<Box
 			as='header'
@@ -11,7 +11,15 @@ export const Header = (props: PropsWithChildren<{}>) => {
 			background='brand'
 			pad={{ left: 'medium', right: 'small', vertical: 'small' }}
 			style={{ zIndex: 1 }}
-			{...props}
+		>
-		/>
+			<Text
+				margin={{ vertical: 'small' }}
+				color='light-1'
+				size='xxlarge'
+				weight='bold'
+			>
+				Spoti Search
+			</Text>
+		</Box>
 	);
 };

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'
+			pad='xsmall'
-			align='center'
-			pad='small'
 			onClick={() => handleClick(name)}
+			width='130px'
 		>
-			<Heading
-				level='4'
-				margin={{ bottom: 'small', top: 'small', left: 'small' }}
-			>
-				{name}
-			</Heading>
 			<Box
-				height='small'
+				height='120px'
-				width='small'
+				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>
 	);
 };

src/components/Results.tsx

@@ -37,11 +37,11 @@ export const Results = ({
 		<Grid
 			as='section'
 			rows={['fit', 'fit']}
-			columns={['fit', '2/3']}
+			columns={['fit', 'fit']}
 			gap='large'
 			areas={[
-				['artist-title', 'other-title'],
+				['title', 'title'],
-				['artist', 'other'],
+				['artist-other', 'artist-other'],
 				['disco-title', 'disco-title'],
 				['discography', 'discography'],
 			]}
@@ -49,36 +49,45 @@ export const Results = ({
 		>
 			<Heading
 				level='1'
-				size='small'
+				gridArea='title'
-				gridArea='artist-title'
+				size='medium'
 				margin={{ vertical: 'none' }}
 			>
 				{selectedName}
 			</Heading>
-			<Box gridArea='artist'>
+			<Box
-				<Box
+				gridArea='artist-other'
-					round='full'
+				direction='row-responsive'
-					background={{
+				responsive
-						repeat: 'no-repeat',
+				gap='large'
-						size: 'cover',
-						image: `url(${selectedImage})`,
-					}}
-					height='300px'
-					width='300px'
-				/>
-			</Box>
-			<Heading
-				level='2'
-				gridArea='other-title'
-				margin={{ vertical: 'none' }}
-				alignSelf='end'
-				size='small'
 			>
-				Other results
+				<Box width={{ min: '300px', max: '300px' }}>
-			</Heading>
+					<Box
-			<ResponsiveContext.Consumer>
+						round='full'
-				{(size) => (
+						background={{
-					<Box gridArea='other' direction='row-reverse' justify='end' wrap gap='medium'>
+							repeat: 'no-repeat',
+							size: 'cover',
+							image: `url(${selectedImage})`,
+						}}
+						height='300px'
+						width='300px'
+					/>
+				</Box>
+				<Box justify='center'>
+					<Heading
+						level='2'
+						margin={{ vertical: 'none' }}
+						size='small'
+					>
+						Other results
+					</Heading>
+					<Box
+						direction='row-reverse'
+						justify='end'
+						wrap
+						gap='medium'
+						width={{ min: '332px' }}
+					>
 						{otherArtists.map((artist) => (
 							<Other
 								key={artist.id}
@@ -88,9 +97,14 @@ export const Results = ({
 							/>
 						))}
 					</Box>
-				)}
+				</Box>
-			</ResponsiveContext.Consumer>
+			</Box>
-			<Heading level='2' gridArea='disco-title' size='large' margin={{bottom: "none"}}>
+			<Heading
+				level='2'
+				gridArea='disco-title'
+				size='medium'
+				margin={{ bottom: 'none' }}
+			>
 				Discography
 			</Heading>
 			<ResponsiveContext.Consumer>
@@ -98,7 +112,7 @@ export const Results = ({
 					<Grid
 						gridArea='discography'
 						align='start'
-						columns={{ count: 'fill', size: '300px' }}
+						columns={{ count: 'fill', size: '260px' }}
 						gap='large'
 					>
 						{selectedAlbums.map((album) => (