fixed some navigation issues

src/components/LibraryGrid.tsx

@@ -40,7 +40,7 @@ const ScrollableSection = ({ title, children, showViewAll }: { title: string, ch
         </div>
         {showViewAll && <a className="text-[10px] font-black text-[#2563eb] hover:underline uppercase geist-mono tracking-[0.3em]" href="#">View All</a>}
       </div>
-      <div ref={scrollRef} className="flex overflow-x-auto no-scrollbar -mx-3 scroll-smooth relative pt-2 pb-4">
+      <div ref={scrollRef} className="flex overflow-x-auto no-scrollbar -mx-3 scroll-smooth relative pt-2 pb-4 px-4">
         {children}
       </div>
     </section>
@@ -98,7 +98,7 @@ const LibraryGrid = () => {
 
   const hasFeatured = combinedFeaturedGames.length > 0;
   const heroGames = hasFeatured ? combinedFeaturedGames : recentGames;
-  const showRecentSection = hasFeatured; 
+  const showRecentSection = hasFeatured;
   const standardCollections = collections.filter(c => c.name.toLowerCase() !== 'featured');
 
   return (
@@ -107,7 +107,7 @@ const LibraryGrid = () => {
         {heroGames.length > 0 && <FeaturedHero games={heroGames} isFallback={!hasFeatured} />}
 
         <div className="px-12 py-16 space-y-20 pb-24">
-          
+
           {showRecentSection && recentGames.length > 0 && (
             <ScrollableSection title="Recently Added" showViewAll>
               {recentGames.map((game) => (
@@ -142,13 +142,13 @@ const LibraryGrid = () => {
                 const cover = col.games?.[0]?.coverUrl || '';
                 const gamesCount = col.games?.length || 0;
                 const caption = gamesCount > 0 ? `${gamesCount} Game${gamesCount === 1 ? '' : 's'}` : (col.ownerRole === 'admin' ? 'Public' : 'Private');
-                
+
                 return (
                   <ScrollBumper key={col.id}>
-                    <CollectionCard  
-                      name={col.name} 
-                      caption={caption} 
-                      coverUrl={cover} 
+                    <CollectionCard
+                      name={col.name}
+                      caption={caption}
+                      coverUrl={cover}
                     />
                   </ScrollBumper>
                 );
@@ -167,10 +167,10 @@ const LibraryGrid = () => {
               { id: 'auto-6', name: 'Never Played', icon: 'videogame_asset_off' },
             ].map((col) => (
               <ScrollBumper key={col.id}>
-                <CollectionCard  
-                  name={col.name} 
-                  caption="Smart Collection" 
-                  icon={col.icon} 
+                <CollectionCard
+                  name={col.name}
+                  caption="Smart Collection"
+                  icon={col.icon}
                 />
               </ScrollBumper>
             ))}