# Bug in Cards in React 18 course

**URL:** <https://forum.codewithmosh.com/t/bug-in-cards-in-react-18-course/23008>\
**Category:** React\
**Created:** [October 13, 2023, 4:05pm UTC](https://forum.codewithmosh.com/t/bug-in-cards-in-react-18-course/23008 "2023-10-13T16:05:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mhamid3d](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/mhamid3d/32/7101_2.png) [@mhamid3d](https://forum.codewithmosh.com/u/mhamid3d)\
**Post date:** [October 13, 2023, 4:05pm UTC](https://forum.codewithmosh.com/t/bug-in-cards-in-react-18-course/23008/1 "2023-10-13T16:05:07Z")

</div>

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

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

```

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

```auto
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](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/4/4064b50eaf312b54f0057da3335234d02a82c187.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![june](https://avatars.discourse-cdn.com/v4/letter/j/8e7dd6/32.png) [@june](https://forum.codewithmosh.com/u/june)\
**Post date:** [October 14, 2023, 1:45am UTC](https://forum.codewithmosh.com/t/bug-in-cards-in-react-18-course/23008/2 "2023-10-14T01:45:56Z")

</div>

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.

```auto
// 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>

```