GitFOSS

@@ -1,5 +1,5 @@
 {
-  "_generatedAtUnix": 1778835975148,
+  "_generatedAtUnix": 1778839401647,
   "_hashAlgorithm": "sha1",
   "_version": 2,
   "assets": {

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

@@ -32,8 +32,10 @@ const RepositoriesList: ReactIsland<
 
         .card {
           min-width: 300px;
+          max-width: calc(33% - 8px);
           width: 100%;
           flex: 0 0 33%;
+          max-height: 200px;
           min-height: 200px;
           gap: 8px;
         }

@@ -61,18 +63,71 @@ const RepositoriesList: ReactIsland<
       `}</style>
       <script>{`
         // quick js to set @container height based on number of cards
-        window.addEventListener(\`load\`, function(event) {
+        function resize() {
+          const gap = 4;
+          const cardWidth = 300; // match your min-width
+          const cardHeight = 200; // use computed or measured height
           const container = document.querySelector(\`${selector}\`);
-          if (!container) return;
+          const cards = document.querySelectorAll(\`${selector} .card\`);
+          if (!container || cards.length === 0) return;
           const containerWidth = container.clientWidth;
-          const cardMin = 300; // match your min-width
-          const gap = 8;
-          const cols = Math.max(1, Math.floor((containerWidth + gap) / (cardMin + gap)));
-          const rows = Math.ceil(${repositories.length} / cols);
-          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\`;
+          const cols = Math.floor((containerWidth + gap) / (cardWidth + gap));
+          const rows = Math.ceil(cards.length / cols);
+          let height = (cols * cardHeight);
+          let i = 0;
+          if (cols === 1) {
+            height = rows * cardHeight;
+            height += cardHeight;
+            i += rows;
+          } else {
+            height = cols * cardHeight;
+            i += 1;
+            if (cols == 2) {
+              if (cards.length % cols !== 0) {
+                height += cardHeight * 2;
+                i += 1;
+              }
+            } else if (cols == 3) {
+              if (cards.length % rows !== 0) {
+                height += cardHeight;
+                height -= cardHeight / 1.2; // why 1.2?
+              }
+              i += 1;
+            } else if (cols == 4) {
+              if (cards.length % cols !== 0) {
+                height -= cardHeight;
+                i += 1;
+              }
+            }
+          }
+          height -= ((rows * gap) * i);
+          // container.style.height = \`\${height}px\`;
+          container.style.minBlockSize = \`\${height}px\`;
+          cards.forEach(function (card, index) {
+            card.style.height = cardHeight;
+            card.style.maxHeight = cardHeight;
+            card.style.minHeight = cardHeight;
+          });
+          console.log({
+            containerWidth,
+            cols,
+            rows,
+            height,
+          })
+        }
+        window.addEventListener(\`load\`, function(event) {
+          resize();
+        });
+        window.addEventListener(\`resize\`, function(event) {
+          // function debounce(func, wait) {
+          //   let timeout;
+          //   return function() {
+          //     clearTimeout(timeout);
+          //     timeout = setTimeout(func, wait);
+          //   };
+          // }
+          // debounce(resize, 200);
+          resize();
         });
       `}</script>
       <Grid.Row