fix results overflow

qutip · Aug 12, 2023 · 37fed70 · 37fed70
1 parent 1d0bdea
commit 37fed70
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 25 deletions.
diff --git a/src/Results.css b/src/Results.css
@@ -1,15 +1,12 @@
 #results {
     padding: 20px;
-
-}
-
-.result-container {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     width: 100%;
-    overflow-y: auto;
+    flex-wrap: wrap;
+    max-height: 100%;
 }
 
 .result-container > * {

diff --git a/src/Results.jsx b/src/Results.jsx
@@ -16,27 +16,27 @@ export default function Results() {
 
   return (
     <div id="results">
-      <div className="result-container">
-        {!results.length ? (
-          <div className="results-placeholder">
-            Press 'Simulate' to view the results here!
+      {!results.length ? (
+        <div className="results-placeholder">
+          Press 'Simulate' to view the results here!
+        </div>
+      ) : (
+        results.map((data, i) => (
+          <div style={{ border: "1px solid black" }} key={i}>
+            <h2 style={{ alignSelf: "start", background: "black", padding: 5 }}>
+              Qubit {i + 1}
+            </h2>
+            <BlochSphere time={time} data={data} key={"b" + i} />
+            <LineGraph
+              key={"lg" + i}
+              data={data}
+              onHover={setTime}
+              time={time}
+              onBlur={() => setTime(null)}
+            />
           </div>
-        ) : (
-          results.map((data, i) => (
-            <div style={{ border: '1px solid black'}} key={i}>
-            <h2 style={{alignSelf: 'start', background: 'black', padding: 5}}>Qubit {i+1}</h2>
-              <BlochSphere time={time} data={data} key={"b" + i} />
-              <LineGraph
-                key={"lg" + i}
-                data={data}
-                onHover={setTime}
-                time={time}
-                onBlur={() => setTime(null)}
-              />
-            </div>
-          ))
-        )}
-      </div>
+        ))
+      )}
     </div>
   );
 }