style: add rounded corners to card images and hide scrollbars
- Add rounded-xl to card images so corners match the card border radius - Replace scrollbar-thin with scrollbar-none on horizontal scroll containers
This commit is contained in:
+4
-4
@@ -121,7 +121,7 @@ function GameSection({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-thin'>
|
||||
<div className='flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-none'>
|
||||
{games.map((game, idx) => (
|
||||
<motion.div
|
||||
key={game.id}
|
||||
@@ -138,7 +138,7 @@ function GameSection({
|
||||
src={game.capsule_image}
|
||||
alt={game.title}
|
||||
fill
|
||||
className='object-cover group-hover:scale-[0.97] transition-transform duration-300'
|
||||
className='object-cover rounded-xl group-hover:scale-[0.97] transition-transform duration-300'
|
||||
sizes='(max-width: 640px) 144px, 176px'
|
||||
/>
|
||||
) : (
|
||||
@@ -228,7 +228,7 @@ function SaleSection({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-thin'>
|
||||
<div className='flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-none'>
|
||||
{games.map((game, idx) => {
|
||||
const discountPct = game.price_initial && game.price_current
|
||||
? Math.round((1 - game.price_current / game.price_initial) * 100)
|
||||
@@ -250,7 +250,7 @@ function SaleSection({
|
||||
src={game.capsule_image}
|
||||
alt={game.title}
|
||||
fill
|
||||
className='object-cover group-hover:scale-[0.97] transition-transform duration-300'
|
||||
className='object-cover rounded-xl group-hover:scale-[0.97] transition-transform duration-300'
|
||||
sizes='(max-width: 640px) 144px, 176px'
|
||||
/>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user