From 211cb5f5f9176644c7c5d760ad2dfda676282470 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Mon, 21 Aug 2017 14:37:26 -0600
Subject: [PATCH] Fix CSS height for details; Update code spacing in
 PhonologyDisplay

---
 .../DetailsSection/PhonologyDisplay.jsx       | 108 ++++++++++--------
 .../DetailsSection/styles.scss                |   1 +
 2 files changed, 61 insertions(+), 48 deletions(-)

diff --git a/src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx b/src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx
index dbb92f1..cc7e39e 100644
--- a/src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx
+++ b/src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx
@@ -15,28 +15,32 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
         <div className='column is-half'>
           <strong>Consonants:</strong>
           <div className='tags'>
-            {phonologyContent.consonants.map(consonant => {
-              return (
-                <span key={`consonant_${ consonant }_${ Date.now().toString() }`}
-                  className='tag'>
-                  { consonant }
-                </span>
-              );
-            })}
+            {
+              phonologyContent.consonants.map(consonant => {
+                return (
+                  <span key={`consonant_${ consonant }_${ Date.now().toString() }`}
+                    className='tag'>
+                    { consonant }
+                  </span>
+                );
+              })
+            }
           </div>
         </div>
 
         <div className='column is-half'>
           <strong>Vowels:</strong>
           <div className='tags'>
-            {phonologyContent.vowels.map(vowel => {
-              return (
-                <span key={`vowel_${ vowel }_${ Date.now().toString() }`}
-                  className='tag'>
-                  { vowel }
-                </span>
-              );
-            })}
+            {
+              phonologyContent.vowels.map(vowel => {
+                return (
+                  <span key={`vowel_${ vowel }_${ Date.now().toString() }`}
+                    className='tag'>
+                    { vowel }
+                  </span>
+                );
+              })
+            }
           </div>
         </div>
 
@@ -50,14 +54,16 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
             <div className='column'>
               <strong>Polyphthongs{'\u200B'}/{'\u200B'}Blends:</strong>
               <div className='tags'>
-                {phonologyContent.blends.map(blend => {
-                  return (
-                    <span key={`blend_${ blend }_${ Date.now().toString() }`}
-                      className='tag'>
-                      { blend }
-                    </span>
-                  );
-                })}
+                {
+                  phonologyContent.blends.map(blend => {
+                    return (
+                      <span key={`blend_${ blend }_${ Date.now().toString() }`}
+                        className='tag'>
+                        { blend }
+                      </span>
+                    );
+                  })
+                }
               </div>
             </div>
 
@@ -80,42 +86,48 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
               <div className='column is-one-third'>
                 <strong>Onset:</strong>
                 <div className='tags'>
-                  {phonologyContent.phonotactics.onset.map(onset => {
-                    return (
-                      <span key={`onset_${ onset }_${ Date.now().toString() }`}
-                        className='tag'>
-                        { onset }
-                      </span>
-                    );
-                  })}
+                  {
+                    phonologyContent.phonotactics.onset.map(onset => {
+                      return (
+                        <span key={`onset_${ onset }_${ Date.now().toString() }`}
+                          className='tag'>
+                          { onset }
+                        </span>
+                      );
+                    })
+                  }
                 </div>
               </div>
 
               <div className='column is-one-third'>
                 <strong>Nucleus:</strong>
                 <div className='tags'>
-                  {phonologyContent.phonotactics.nucleus.map(nucleus => {
-                    return (
-                      <span key={`onset_${ nucleus }_${ Date.now().toString() }`}
-                        className='tag'>
-                        { nucleus }
-                      </span>
-                    );
-                  })}
+                  {
+                    phonologyContent.phonotactics.nucleus.map(nucleus => {
+                      return (
+                        <span key={`onset_${ nucleus }_${ Date.now().toString() }`}
+                          className='tag'>
+                          { nucleus }
+                        </span>
+                      );
+                    })
+                  }
                 </div>
               </div>
 
               <div className='column is-one-third'>
                 <strong>Coda:</strong>
                 <div className='tags'>
-                  {phonologyContent.phonotactics.coda.map(coda => {
-                    return (
-                      <span key={`onset_${ coda }_${ Date.now().toString() }`}
-                        className='tag'>
-                        { coda }
-                      </span>
-                    );
-                  })}
+                  {
+                    phonologyContent.phonotactics.coda.map(coda => {
+                      return (
+                        <span key={`onset_${ coda }_${ Date.now().toString() }`}
+                          className='tag'>
+                          { coda }
+                        </span>
+                      );
+                    })
+                  }
                 </div>
               </div>
 
diff --git a/src/components/display/DictionaryDetails/DetailsSection/styles.scss b/src/components/display/DictionaryDetails/DetailsSection/styles.scss
index f1bef9b..554ffb7 100644
--- a/src/components/display/DictionaryDetails/DetailsSection/styles.scss
+++ b/src/components/display/DictionaryDetails/DetailsSection/styles.scss
@@ -6,6 +6,7 @@
 
 .details-menu,
 .details-display {
+  height: 100%;
   max-height: 500px;
   overflow-y: auto;
   overflow-x: hidden;