@@ -1,5 +1,5 @@
 {
-  "_generatedAtUnix": 1778833431035,
+  "_generatedAtUnix": 1778835583155,
   "_hashAlgorithm": "sha1",
   "_version": 2,
   "assets": {

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

@@ -19,15 +19,17 @@ export interface RepositoriesListProps {
 const RepositoriesList: ReactIsland<
   RepositoriesListProps & WithThemeSchemeProp
 > = ({ repositories, themeScheme }) => {
+  const selector = ".container";
   return (
-    <Grid.Row
-      fluid
-      gap={4}
-      alignItems={"stretch"}
-      justifyContent={"stretch"}
-      style={{ marginTop: 16 }}
-    >
+    <>
       <style>{`
+        .container {
+          container-type: size;
+          container-name: repositories;
+          min-block-size: 210px;
+          height: max-content;
+        }
+
         .card {
           min-width: 300px;
           width: 100%;

@@ -36,14 +38,14 @@ const RepositoriesList: ReactIsland<
           gap: 8px;
         }
 
-        @media only screen and (max-width: ${breakpoints.sml}) {
+        @container repositories (min-width: ${breakpoints.sml}) {
           .card {
             flex: .3;
             min-width: calc(33% - 8px);
           }
         }
 
-        @media only screen and (max-width: ${breakpoints.sm}) {
+        @container repositories (max-width: ${breakpoints.sml}) {
           .card {
             flex: .5;
             min-width: calc(50% - 8px);

@@ -57,48 +59,72 @@ const RepositoriesList: ReactIsland<
           }
         }
       `}</style>
-      {repositories.map((repo) => (
-        <Card key={repo.id} themeScheme={themeScheme} className="card">
-          <Grid.Row fluid nowrap>
-            <h1 style={{ margin: 0, flex: 1 }}>
-              <a
-                href={buildRouteLink(AppRoute.REPOSITORY_DETAILS, {
-                  orgSlug: repo.parentOrg.slug,
-                  repoSlug: repo.slug,
-                })}
-              >
-                {repo.parentOrg.displayName || repo.parentOrg.slug}
-                {" / "}
-                {repo.displayName || repo.slug}
-                {" ∙ "}
-                <span style={{ textTransform: "capitalize" }}>
-                  ({repo.visibility.toLowerCase()})
-                </span>
-              </a>
-            </h1>
-            {repo.isFork && (
-              <p style={{ margin: 0, marginTop: 8 }}>
-                <code>[fork]</code>
-              </p>
-            )}
-          </Grid.Row>
-          <Grid.Col fluid gap={8}>
-            <p style={{ margin: 0 }}>{repo.shortDescription}</p>
-            {repo.lastPushedAt != null && (
-              <p
-                style={{
-                  margin: 0,
-                  fontSize: 14,
-                  color: NamedColors.TEXT_MUTED[themeScheme],
-                }}
-              >
-                Last push: {new Date(repo.lastPushedAt).toLocaleString()}
-              </p>
-            )}
-          </Grid.Col>
-        </Card>
-      ))}
-    </Grid.Row>
+      <script>{`
+        window.addEventListener(\`load\`, function(event) {
+          const container = document.querySelector(\`${selector}\`);
+          if (!container) 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 = 200; // use computed or measured height
+          const height = rows * cardHeight + (rows - 1) * gap;
+          container.style.height = \`\${height}px\`;
+          container.style.minHeight = \`\${height}px\`;
+        });
+      `}</script>
+      <Grid.Row
+        fluid
+        gap={4}
+        alignItems={"stretch"}
+        justifyContent={"stretch"}
+        style={{ marginTop: 16 }}
+        className="container"
+      >
+        {repositories.map((repo) => (
+          <Card key={repo.id} themeScheme={themeScheme} className="card">
+            <Grid.Row fluid nowrap>
+              <h1 style={{ margin: 0, flex: 1 }}>
+                <a
+                  href={buildRouteLink(AppRoute.REPOSITORY_DETAILS, {
+                    orgSlug: repo.parentOrg.slug,
+                    repoSlug: repo.slug,
+                  })}
+                >
+                  {repo.parentOrg.displayName || repo.parentOrg.slug}
+                  {" / "}
+                  {repo.displayName || repo.slug}
+                  {" ∙ "}
+                  <span style={{ textTransform: "capitalize" }}>
+                    ({repo.visibility.toLowerCase()})
+                  </span>
+                </a>
+              </h1>
+              {repo.isFork && (
+                <p style={{ margin: 0, marginTop: 8 }}>
+                  <code>[fork]</code>
+                </p>
+              )}
+            </Grid.Row>
+            <Grid.Col fluid gap={8}>
+              <p style={{ margin: 0 }}>{repo.shortDescription}</p>
+              {repo.lastPushedAt != null && (
+                <p
+                  style={{
+                    margin: 0,
+                    fontSize: 14,
+                    color: NamedColors.TEXT_MUTED[themeScheme],
+                  }}
+                >
+                  Last push: {new Date(repo.lastPushedAt).toLocaleString()}
+                </p>
+              )}
+            </Grid.Col>
+          </Card>
+        ))}
+      </Grid.Row>
+    </>
   );
 };