fixed some navigation issues

package-lock.json

@@ -18,6 +18,8 @@
         "framer-motion": "^11.5.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-gamepad": "^1.0.3",
+        "react-intersection-observer": "^10.0.3",
         "react-router-dom": "^6.26.0",
         "tailwind-merge": "^2.5.2"
       },
@@ -6768,6 +6770,30 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-gamepad": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/react-gamepad/-/react-gamepad-1.0.3.tgz",
+      "integrity": "sha512-gMwITmfoHtCaMFpDaEshcjeibHAgynXD28NnS2pa+dG+stwNoN66YDVizN7GfyIrYiW5Ft1ubRxs6/2xW9sRhQ==",
+      "license": "GPLv3",
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
+    "node_modules/react-intersection-observer": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-10.0.3.tgz",
+      "integrity": "sha512-luICLMbs0zxTO/70Zy7K5jOXkABPEVSAF8T3FdZUlctsrIaPLmx8TZe2SSA+CY2HGWfz2INyNTnp82pxNNsShA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -20,6 +20,8 @@
     "framer-motion": "^11.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-gamepad": "^1.0.3",
+    "react-intersection-observer": "^10.0.3",
     "react-router-dom": "^6.26.0",
     "tailwind-merge": "^2.5.2"
   },

src/api/client.ts

@@ -112,15 +112,14 @@ export const rommApiClient = {
   },
 
   async fetchRecentGames(): Promise<Game[]> {
-    // Ordering by internal id desc is functionally identical to created_at logic natively
-    const res = await fetch(`${this.apiBase}/roms?limit=20&order_by=id&order_dir=desc`, { headers: this.headers });
+    const res = await fetch(`${this.apiBase}/roms?limit=50&order_by=id&order_dir=desc`, { headers: this.headers });
     if (!res.ok) throw new Error('Failed to fetch recents.');
     const json = await res.json();
     return json.items ? json.items.map(mapRomToGame) : [];
   },
 
   async fetchFavorites(): Promise<Game[]> {
-    const res = await fetch(`${this.apiBase}/roms?favorite=true&limit=20`, { headers: this.headers });
+    const res = await fetch(`${this.apiBase}/roms?favorite=true&limit=50`, { headers: this.headers });
     if (!res.ok) throw new Error('Failed to fetch favorites.');
     const json = await res.json();
     return json.items ? json.items.map(mapRomToGame) : [];

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>
             ))}

src/hooks/useFocusableAutoScroll.ts

@@ -8,7 +8,7 @@ export const useFocusableAutoScroll = (config?: UseFocusableConfig) => {
   
   useEffect(() => {
     if (mode === 'gamepad' && result.focused && result.ref.current) {
-      result.ref.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+      result.ref.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
     }
   }, [result.focused, mode]);