fix: enable scrolling to bottom on detail pages on mobile

.github/actions/test/action.yml

@@ -4,11 +4,11 @@ runs:
   using: "composite"
   steps:
     - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v7
       with:
         fetch-depth: 0
     - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
       with:
         node-version: "lts/*"
     - name: Install dependencies

.github/workflows/release-on-main.yml

@@ -24,11 +24,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
       - name: Check for changes in src
-        uses: dorny/paths-filter@v3
+        uses: dorny/paths-filter@v4
         id: filter
         with:
           filters: |
@@ -43,11 +43,11 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: npx semantic-release
       - name: Setup Pages
-        uses: actions/configure-pages@v5
+        uses: actions/configure-pages@v6
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v4
+        uses: actions/upload-pages-artifact@v5
         with:
           path: "example-web/react2/dist"
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v5

.github/workflows/test-on-branch.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
       - name: Test

example-web/react2/src/components/CardItemsComponent.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
+
+const CardItemsComponent: React.FC<{
+  configData: CollectionConfigData<"CardItems">;
+}> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
+  return (
+    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '30px' }}>
+
+      <div style={{ width: '100%', maxWidth: '400px' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.GoldIcon || configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.DisplayName
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ fontSize: '1.1em', color: '#555', textAlign: 'center', maxWidth: '600px', lineHeight: '1.6' }}>
+        <p style={{ marginBottom: '20px', background: '#fff', padding: '20px', borderRadius: '12px', border: '1px solid #eee' }}>"{configData.Desc}"</p>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', flexWrap: 'wrap' }}>
+          {configData.AssociatedPetId && (
+            <span style={{ background: '#1976d2', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>
+              Pet: {configData.AssociatedPetId}
+            </span>
+          )}
+          {configData.titanic && (
+            <span style={{ background: '#f57c00', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>Titanic</span>
+          )}
+          {configData.Tradable && (
+            <span style={{ background: '#9c27b0', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>Tradable</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardItemsComponent;

example-web/react2/src/components/CollectionsLayout.tsx

@@ -21,7 +21,7 @@ const CollectionsLayout: React.FC = () => {
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-                minHeight: isMobile ? "100vh" : "calc(100vh - 80px)",
+                minHeight: isMobile ? "100dvh" : "calc(100vh - 80px)",
                 padding: isMobile ? "0" : "10px",
                 height: "100%",
                 boxSizing: "border-box"
@@ -34,7 +34,7 @@ const CollectionsLayout: React.FC = () => {
                         display: "flex",
                         width: "100%",
                         maxWidth: "1200px",
-                        height: isMobile ? "100vh" : "85vh",
+                        height: isMobile ? "100dvh" : "85vh",
                         backgroundColor: "#fff",
                         borderRadius: isMobile ? "0" : "16px",
                         boxShadow: isMobile ? "none" : "0 10px 40px rgba(0,0,0,0.2)",

example-web/react2/src/components/DynamicCollectionConfigData.tsx

@@ -182,7 +182,12 @@ const DynamicCollectionConfigData: React.FC<
                       <pre style={{ margin: 0 }}>{JSON.stringify(configData, null, 2)}</pre>
                     </div>
                   ) : (
-                    props.render ? props.render(configData) : <Component configData={configData} {...props.additionalProps} />
+                    // Plain wrapper with no explicit height so child components' `height: 100%`
+                    // resolves to auto (natural content height) instead of clamping to the
+                    // scroll container's clientHeight, which would suppress scrollHeight.
+                    <div>
+                      {props.render ? props.render(configData) : <Component configData={configData} {...props.additionalProps} />}
+                    </div>
                   )}
                 </div>
               </>

example-web/react2/test.js

@@ -1,3 +1,5 @@
+const { describe, expect, test } = require('@jest/globals');
+
 function getRouteId(collectionName, item) {
     const configName = item.configName;
     if (configName.includes(' | ')) {
@@ -19,5 +21,39 @@ function getRouteId(collectionName, item) {
     }
     return configName;
 }
-console.log('Buffs Output:', getRouteId('Buffs', { configName: 'Buff | Ultra Pet Token Boost' }));
-console.log('Eggs Output:', getRouteId('Eggs', { configName: '8 | Present Egg', category: 'Event' }));
+
+describe('getRouteId routing logic', () => {
+    test('non-Eggs/Zones collections use the right side of the split', () => {
+        expect(getRouteId('Buffs', { configName: 'Buff | Ultra Pet Token Boost' })).toBe('Ultra Pet Token Boost');
+        expect(getRouteId('Pets', { configName: 'Pets | Golden Dog' })).toBe('Golden Dog');
+    });
+
+    test('Zones use the left side of the split', () => {
+        expect(getRouteId('Zones', { configName: 'Zone1 | Some Zone Name' })).toBe('Zone1');
+    });
+
+    test('Event Eggs use the right side of the split', () => {
+        expect(getRouteId('Eggs', { configName: '8 | Present Egg', category: 'Event' })).toBe('Present Egg');
+    });
+
+    test('Release Eggs use the left side of the split', () => {
+        expect(getRouteId('Eggs', { configName: '1 | Starter Egg', category: 'Release' })).toBe('1');
+    });
+
+    test('World Eggs use the left side of the split', () => {
+        expect(getRouteId('Eggs', { configName: '3 | World Egg', category: 'World 3' })).toBe('3');
+    });
+
+    test('Update Eggs use the left side of the split', () => {
+        expect(getRouteId('Eggs', { configName: '5 | Update Egg', category: 'Update 5' })).toBe('5');
+    });
+
+    test('Worlds strips "World " prefix from configName', () => {
+        expect(getRouteId('Worlds', { configName: 'World 7' })).toBe('7');
+    });
+
+    test('items without a split delimiter return configName as-is', () => {
+        expect(getRouteId('Pets', { configName: 'SimplePet' })).toBe('SimplePet');
+        expect(getRouteId('Eggs', { configName: 'BasicEgg' })).toBe('BasicEgg');
+    });
+});

package.json

@@ -37,7 +37,7 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "axios": "^1.13.5"
+    "axios": "^1.18.1"
   },
   "repository": {
     "type": "git",