From 25422eef906a32ef3ba241de571ac06bf791aa5f Mon Sep 17 00:00:00 2001
From: Ian Johnson <enjalot@gmail.com>
Date: Fri, 26 Jan 2024 17:44:40 -0500
Subject: [PATCH] slightly more styling on home scopes

---
 web/src/components/Home.css | 11 +++++++++++
 web/src/components/Home.jsx |  4 +++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Home.css b/web/src/components/Home.css
index 0453405..525a0bc 100644
--- a/web/src/components/Home.css
+++ b/web/src/components/Home.css
@@ -16,3 +16,14 @@
   background-color: #f9f9f9;
   cursor: pointer;
 }
+
+.home .scope-links {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.home .scope-link {
+  padding: 12px;
+
+
+}
\ No newline at end of file
diff --git a/web/src/components/Home.jsx b/web/src/components/Home.jsx
index bb78ba5..5c6949b 100644
--- a/web/src/components/Home.jsx
+++ b/web/src/components/Home.jsx
@@ -119,13 +119,15 @@ function Home() {
         {datasets.map(dataset => (
           <li key={dataset.id}>
             <Link to={`/datasets/${dataset.name}/setup`}>Setup {dataset.name}</Link>
+            <div className="scope-links">
             {scopes[dataset.id] && scopes[dataset.id].map && scopes[dataset.id]?.map((scope,i) => (
-              <div key={i} >
+              <div className="scope-link" key={i} >
                 <Link to={`/datasets/${dataset.name}/explore/${scope.id}`}>Explore {scope.name} - {scope.label}<br></br>
                 <img width="120px" src={`${apiUrl}/files/${dataset.id}/clusters/${scope.cluster}.png`} />
                 </Link><br></br>
               </div>
             ))}
+            </div>
           </li>
         ))}
       </ul>