fix(repos): set the container height properly (js)
+ 5
- 4
@@ -1,5 +1,5 @@
 {
-  "_generatedAtUnix": 1778835583155,
+  "_generatedAtUnix": 1778835975148,
   "_hashAlgorithm": "sha1",
   "_version": 2,
   "assets": {

...
@@ -40,7 +40,7 @@
       "pathSourceMap": "./public/.islands/PullRequestSourceSelect.bundle.js.map"
     },
     "RepositoriesList": {
-      "hash": "fe287b3d71b1600333705fe6bf938f37181ba2f6",
+      "hash": "51fb0ce5a1de069cad8f7c6017462e2358ca6e88",
       "pathSource": "./app/islands/RepositoriesList.tsx",
       "pathBundle": "./public/.islands/RepositoriesList.bundle.js",
       "pathSourceMap": "./public/.islands/RepositoriesList.bundle.js.map"

app/islands/RepositoriesList.tsx
@@ -60,6 +60,7 @@ const RepositoriesList: ReactIsland<
         }
       `}</style>
       <script>{`
+        // quick js to set @container height based on number of cards
         window.addEventListener(\`load\`, function(event) {
           const container = document.querySelector(\`${selector}\`);
           if (!container) return;

...
@@ -68,8 +69,8 @@ const RepositoriesList: ReactIsland<
           const gap = 8;
           const cols = Math.max(1, Math.floor((containerWidth + gap) / (cardMin + gap)));
           const rows = Math.ceil(${repositories.length} / cols);
-          const cardHeight = 200; // use computed or measured height
-          const height = rows * cardHeight + (rows - 1) * gap;
+          const cardHeight = 210; // use computed or measured height
+          const height = (rows * cardHeight) + ((rows - 1) * gap);
           container.style.height = \`\${height}px\`;
           container.style.minHeight = \`\${height}px\`;
         });