More UI polish.

public/global.css

@@ -9,6 +9,8 @@
 
 body {
   color: #333;
+  width: 1300px;
+  max-width: 1300px;
   margin: 0;
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -45,18 +47,16 @@ nav > div > :last-child {
 }
 
 main {
-  max-width: 1500px;
-  width: 100%;
+  width: 1500px;
   /* min-height: 700px; */
   padding-top: var(--space-8x);
   padding-bottom: var(--space-8x);
   padding-bottom: var(--space-12x);
+  display: inline;
 }
 
-@media (max-width: 1400px) {
-  main {
-    width: 100%;
-  }
+.gp-stack {
+  display: inline;
 }
 
 input,
@@ -128,6 +128,7 @@ h6 {
 .custom_label, .label_large {
   font-weight: bold;
   padding-right: 5px;
+  float: left;
 }
 
 .label_large, .text_large {
@@ -137,7 +138,6 @@ h6 {
 
 .row {
   height: 100%;
-  width: 100%;
   display: flex;
   padding-left: 25px;
   padding-bottom: 25px;
@@ -145,7 +145,6 @@ h6 {
 
 .row_left, .row_right {
   width: 50%;
-  display: inherit;
 }
 
 .indent {

src/App.svelte

@@ -140,6 +140,20 @@
     font-weight: bold;
     font-style: oblique;
   }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    padding-bottom: 10px;
+    padding-right: 10px;
+    width: 1400px;
+  }
+  .grid-item {
+    padding: 5px;
+    padding-left: 30px;
+    font-size: 20px;
+    text-align: left;
+  }
 </style>
 
 <svelte:head>
@@ -213,27 +227,23 @@
           Overview
         </div>
         <div>
-          <div class="row">
-            <div class="row_left">
-              <div class="custom_label">Status:</div>{currentExperiment.status}
+          <div class="grid-container">
+            <div class="grid-item">
+              <div class="custom_label">Status:</div><span>{currentExperiment.status}</span>
             </div>
-            <div class="row_right">
-              <div class="custom_label">Start Date:</div>{currentExperiment.startDate}
-            </div>
-          </div>
-          <div class="row">
-            <div class="row_left">
-              <div class="custom_label">Enrollment Period:</div>{currentExperiment.enrollmentPeriod} days
-            </div>
-            <div class="row_right">
-              <div class="custom_label">End Date:</div>{currentExperiment.endDate}
-            </div>
-          </div>
-          <div class="row">
-            <div class="row_left">
+            <div class="grid-item">
               <div class="custom_label">Population:</div>{currentExperiment.population}
             </div>
-            <div class="row_right">
+            <div class="grid-item">
+              <div class="custom_label">Enrollment Period:</div>{currentExperiment.enrollmentPeriod} days
+            </div>
+            <div class="grid-item">
+              <div class="custom_label">Start Date:</div>{currentExperiment.startDate}
+            </div>
+            <div class="grid-item">
+              <div class="custom_label">End Date:</div>{currentExperiment.endDate}
+            </div>
+            <div class="grid-item">
               <div class="custom_label">Enrollment Health:</div>???
             </div>
           </div>

src/components/OneBigGraph.svelte

@@ -75,7 +75,7 @@
   let yMax = config.yMax !== undefined ? config.yMax : Math.max(...ys);
 
   if (config.facet) {
-    width = 350;
+    width = 300;
     height = 200;
     right = 8;
   }
@@ -110,11 +110,9 @@
   }
 
   .charts {
-    display: flex;
     flex-wrap: wrap;
     grid-gap: var(--space-3x);
     padding-bottom: var(--space-4x);
-    height: 200px;
   }
 
   h2 {

src/components/Summary.svelte

@@ -78,9 +78,10 @@
     padding-top: 60px;
     padding-bottom: 10px;
     padding-right: 10px;
+    width: 1400px;
   }
   .grid-item {
-    padding: 35px;
+    padding: 30px;
     font-size: 20px;
     text-align: center;
   }
@@ -134,7 +135,7 @@
   }
 </style>
 
-<div>
+<div class="body">
   <div in:fly={{ duration: 400, y: 5 }}>
     <div class="subtitle1">
       Summary