From c5b7e13029dfaa0d164691067dfde86f78e65b5c Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Wed, 26 Feb 2020 16:27:45 -0800
Subject: [PATCH] add style to results component

---
 src/PhonoChangeApplier.scss |  6 ++++++
 src/components/Output.js    |  2 +-
 src/components/Output.scss  | 18 +++++++++++++++---
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/PhonoChangeApplier.scss b/src/PhonoChangeApplier.scss
index 677e259..38cf11c 100644
--- a/src/PhonoChangeApplier.scss
+++ b/src/PhonoChangeApplier.scss
@@ -13,6 +13,12 @@ div.App {
     padding: 0.5em 0;
   }
 
+  h5 {
+    font-size: 1.1em;
+    padding: 0.1em 0;
+    font-weight: 800;
+  }
+
   div.PhonoChangeApplier {
     display: grid;
     width: 100%;
diff --git a/src/components/Output.js b/src/components/Output.js
index 20dd430..14f3a30 100644
--- a/src/components/Output.js
+++ b/src/components/Output.js
@@ -27,7 +27,7 @@ const Output = props => {
     <div className="Output" data-testid="Output">
       <h3>Results of Run</h3>
 
-      <div data-testid="Output-lexicon" className="Output_container">
+      <div data-testid="Output-lexicon" className="Output__container">
         {results && results.length ? renderResults() : <></>}
       </div>
     </div>
diff --git a/src/components/Output.scss b/src/components/Output.scss
index 3bd79e2..0470ac0 100644
--- a/src/components/Output.scss
+++ b/src/components/Output.scss
@@ -1,6 +1,18 @@
-div.Output-epoch {
-  display: flex;
-  p.lexicon {
+div.Output {
+
+  div.Output__container {
     display: flex;
+    flex-flow: row wrap;
   }
+
+  div.Output-epoch {
+    display: flex;
+    flex-flow: column;
+
+    p.lexicon {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
+    }
+  }
+
 }
\ No newline at end of file