GitFOSS

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

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

@@ -10,7 +10,7 @@ import { AppRoute } from "../routes.defs";
 import { Card } from "../components/Card.styled";
 import { Grid } from "../components/Grid";
 import { buildRouteLink } from "../utils/shared";
-import { NamedColors } from "../utils/style";
+import { breakpoints, NamedColors } from "../utils/style";
 
 export interface RepositoriesListProps {
   repositories: (Repository & { parentOrg: Organization })[];

@@ -20,13 +20,45 @@ const RepositoriesList: ReactIsland<
   RepositoriesListProps & WithThemeSchemeProp
 > = ({ repositories, themeScheme }) => {
   return (
-    <>
-      {repositories.map((repo, idx) => (
-        <Card
-          key={repo.id}
-          themeScheme={themeScheme}
-          style={{ marginTop: idx >= 1 ? 4 : 16 }}
-        >
+    <Grid.Row
+      fluid
+      gap={4}
+      alignItems={"stretch"}
+      justifyContent={"stretch"}
+      style={{ marginTop: 16 }}
+    >
+      <style>{`
+        .card {
+          min-width: 300px;
+          width: 100%;
+          flex: 0 0 33%;
+          min-height: 200px;
+          gap: 8px;
+        }
+
+        @media only screen and (max-width: ${breakpoints.sml}) {
+          .card {
+            flex: .3;
+            min-width: calc(33% - 8px);
+          }
+        }
+
+        @media only screen and (max-width: ${breakpoints.sm}) {
+          .card {
+            flex: .5;
+            min-width: calc(50% - 8px);
+          }
+        }
+
+        @media only screen and (max-width: ${breakpoints.s}) {
+          .card {
+            flex: 1;
+            min-width: calc(100% - 8px);
+          }
+        }
+      `}</style>
+      {repositories.map((repo) => (
+        <Card key={repo.id} themeScheme={themeScheme} className="card">
           <Grid.Row fluid nowrap>
             <h1 style={{ margin: 0, flex: 1 }}>
               <a

@@ -50,13 +82,12 @@ const RepositoriesList: ReactIsland<
               </p>
             )}
           </Grid.Row>
-          <div>
-            <p style={{ margin: 0, marginTop: 8 }}>{repo.shortDescription}</p>
+          <Grid.Col fluid gap={8}>
+            <p style={{ margin: 0 }}>{repo.shortDescription}</p>
             {repo.lastPushedAt != null && (
               <p
                 style={{
                   margin: 0,
-                  marginTop: 8,
                   fontSize: 14,
                   color: NamedColors.TEXT_MUTED[themeScheme],
                 }}

@@ -64,10 +95,10 @@ const RepositoriesList: ReactIsland<
                 Last push: {new Date(repo.lastPushedAt).toLocaleString()}
               </p>
             )}
-          </div>
+          </Grid.Col>
         </Card>
       ))}
-    </>
+    </Grid.Row>
   );
 };
 

@@ -1,5 +1,7 @@
 export const breakpoints = {
+  s: "640px",
   sm: "768px",
+  sml: "940px",
   md: "1024px",
   lg: "1280px",
   xl: "1640px",