add responsive grid style to app layout

src/PhonoChangeApplier.scss

@@ -0,0 +1,23 @@
+div.App {
+  height: 100vh;
+  width: 100vw;
+  line-height: 1.25em;
+
+  h1 {
+    font-size: 2em;
+    padding: 1em 0;
+  }
+
+  div.PhonoChangeApplier {
+    display: grid;
+    width: 100%;
+    place-items: center center;
+    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+    grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
+    
+    div {
+      padding: 1em;
+      overflow-y: scroll;
+    }
+  }
+}

src/components/Epochs.js

@@ -37,22 +37,23 @@ const Epochs = ({epochs, dispatch}) => {
     })
   }
 
-  const renderEpochs = () => epochs.map((epoch, index) => (
+  const renderEpochs = () => {
+    if (epochs) return epochs.map((epoch, index) => (
     <SoundChangeSuite 
-      key={`epochname-${index}`} epochIndex={index} epoch={epoch} 
+      key={`epoch-${index}`} epochIndex={index} epoch={epoch} 
       updateEpoch={updateEpoch} removeEpoch={removeEpoch}
       // error={errors[epoch.name]}
     />
-  ))
+  ));
+  }
 
   return (
-    <div className="Epochs" data-testid="Epochs">
+    <>
-      <h3>Sound Change Epochs</h3>
+      { renderEpochs() }
-      { epochs ? renderEpochs() : <></> }
       <form onSubmit={e=>addEpoch(e)}>
         <input type="submit" name="add-epoch" value="Add Epoch" ></input>
       </form>
-    </div>
+    </>
   );
 }