fix: replace horizontal scroll with flex-wrap on card rows
- Remove overflow-x-auto so cards don't capture scroll events - Cards now wrap naturally into rows with flex-wrap - Main page scrolling works normally even when cursor is over cards
This commit is contained in:
+3
-3
@@ -55,7 +55,7 @@ function SkeletonSections() {
|
|||||||
className='space-y-3'
|
className='space-y-3'
|
||||||
>
|
>
|
||||||
<div className='h-5 w-48 bg-text/5 rounded animate-pulse' />
|
<div className='h-5 w-48 bg-text/5 rounded animate-pulse' />
|
||||||
<div className='flex gap-3 overflow-x-auto overflow-y-hidden pb-2'>
|
<div className='flex gap-3 flex-wrap gap-3 pb-2'>
|
||||||
{[1, 2, 3, 4].map((j) => (
|
{[1, 2, 3, 4].map((j) => (
|
||||||
<div
|
<div
|
||||||
key={j}
|
key={j}
|
||||||
@@ -121,7 +121,7 @@ function GameSection({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex gap-3 overflow-x-auto overflow-y-hidden pb-2 -mx-1 px-1 scrollbar-none overscroll-y-none'>
|
<div className='flex gap-3 flex-wrap gap-3 pb-2 -mx-1 px-1'>
|
||||||
{games.map((game, idx) => (
|
{games.map((game, idx) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={game.id}
|
key={game.id}
|
||||||
@@ -228,7 +228,7 @@ function SaleSection({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex gap-3 overflow-x-auto overflow-y-hidden pb-2 -mx-1 px-1 scrollbar-none overscroll-y-none'>
|
<div className='flex gap-3 flex-wrap gap-3 pb-2 -mx-1 px-1'>
|
||||||
{games.map((game, idx) => {
|
{games.map((game, idx) => {
|
||||||
const discountPct = game.price_initial && game.price_current
|
const discountPct = game.price_initial && game.price_current
|
||||||
? Math.round((1 - game.price_current / game.price_initial) * 100)
|
? Math.round((1 - game.price_current / game.price_initial) * 100)
|
||||||
|
|||||||
Reference in New Issue
Block a user