Bug in Cards in React 18 course

React
1

If you remember we set overflow to hidden on the cards container so that the image and card body can share the same border radius. If you switch to light mode you will notice that this causes the box shadow on the cards to be cropped and no longer visible on the taller cards.

To fix this I removed box shadow’s from our Card in GameCard.tsx

const GameCard = ({ game }: Props) => {
	return (
		<Card boxShadow="none">
....

Then in our GameCardContiner.tsx I added the box shadow there:

const GameCardContainer = ({ children }: Props) => {
	return (
		<Box
			borderRadius={10}
			overflow="hidden"
			boxShadow="var(--chakra-shadows-base)"
		>
			{children}
		</Box>
	);
};

At first glance it looks this is a solution to the problem:

image
image970×973 86.8 KB

But when you switch back to dark mode the cards are revealed as tall as they appear. I can’t share more than one image because I am a new user but I’m curious if anyone else noticed this.

2

I also noticed this case, I removed the overflow: “hidden” style in the Box or GameCardContainer component and put it in the Card element/ GameCard component for a quick fix.

// GameCardContainer
 <Box borderRadius={10}>
            {children}
        </Box>


// GameCard
 <Card overflow='hidden'>
            <Image src= {getCroppedImageUrl(game.background_image)}/>
            <CardBody>
                <Heading fontSize='2xl'>{game.name}</Heading>    
                <HStack justifyContent={"space-between"}>
                    <PlatformIconList platforms={game.parent_platforms.map(p => p.platform)}/>
                    <CriticScore score={game.metacritic}/>
                </HStack>
            </CardBody>
        </Card>