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=50&order_by=id&order_dir=desc`, { headers: this.headers });
-    const res = await fetch(`${this.apiBase}/roms?limit=20&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>

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]);