From 228e31a41a34b1561b2f734703e09fa92c83c592 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Wed, 26 Feb 2020 14:42:47 -0800
Subject: [PATCH] add responsive grid style to app layout

---
 src/PhonoChangeApplier.scss | 23 +++++++++++++++++++++++
 src/components/Epochs.js    | 15 ++++++++-------
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/PhonoChangeApplier.scss b/src/PhonoChangeApplier.scss
index e69de29..9911062 100644
--- a/src/PhonoChangeApplier.scss
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Epochs.js b/src/components/Epochs.js
index 383f97d..b779d91 100644
--- a/src/components/Epochs.js
+++ b/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>
-      { epochs ? renderEpochs() : <></> }
+    <>
+      { renderEpochs() }
       <form onSubmit={e=>addEpoch(e)}>
         <input type="submit" name="add-epoch" value="Add Epoch" ></input>
       </form>
-    </div>
+    </>
   );
 }