From 984e9ed9e7b2bc04f6363ecb52827b59c03a1952 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sat, 4 Jul 2020 06:20:00 -0400
Subject: [PATCH] responsive mode button

---
 vocodes/src/App.scss                       | 42 ++++++++++++++++++----
 vocodes/src/modes/speak/SpeakComponent.tsx |  4 ++-
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/vocodes/src/App.scss b/vocodes/src/App.scss
index 13b915acde..ffdc22e8ab 100644
--- a/vocodes/src/App.scss
+++ b/vocodes/src/App.scss
@@ -30,14 +30,10 @@ canvas#spectrogram {
 }
 
 select {
-  max-width: 300px;
+  max-width: 600px;
   height: 2.3em;
 }
 
-.extra_mode_buttons {
-  text-align: center;
-}
-
 p {
   font-family: $body-font-family;
   font-size: 1.2em;
@@ -56,10 +52,13 @@ button {
   font-size: 1.2em;
   margin: 20px;
   min-width: 150px;
-  padding: 0.75em;
   padding: 10px;
 }
 
+.extra_mode_buttons {
+  text-align: center;
+}
+
 #main {
   position: relative; // Footer attachment.
   min-height: 100vh;
@@ -390,6 +389,13 @@ form {
     }
   }
 
+  select {
+    max-width: 300px;
+  }
+
+  .mode_button {
+    margin: 0;
+  }
 
   canvas#spectrogram {
     width: $page-width;
@@ -427,6 +433,14 @@ form {
     }
   }
 
+  select {
+    max-width: 350px;
+  }
+
+  .mode_button {
+    margin: 0;
+  }
+
   canvas#spectrogram {
     width: $page-width;
   }
@@ -463,6 +477,14 @@ form {
     }
   }
 
+  select {
+    max-width: 350px;
+  }
+
+  .mode_button {
+    margin: 0px;
+  }
+
   canvas#spectrogram {
     width: $page-width;
   }
@@ -499,6 +521,14 @@ form {
     }
   }
 
+  select {
+    max-width: 650px;
+  }
+
+  .mode_button {
+    margin: 0 20px;
+  }
+
   canvas#spectrogram {
     width: $page-width;
   }
diff --git a/vocodes/src/modes/speak/SpeakComponent.tsx b/vocodes/src/modes/speak/SpeakComponent.tsx
index e7b93febb5..a24154f991 100644
--- a/vocodes/src/modes/speak/SpeakComponent.tsx
+++ b/vocodes/src/modes/speak/SpeakComponent.tsx
@@ -144,7 +144,9 @@ class SpeakComponent extends React.Component<Props, State> {
           changeSpeakerCallback={this.props.changeSpeakerCallback} 
           />
 
-        <button onClick={this.toggleMode}>{modeText}</button>
+        <button 
+          className="mode_button"
+          onClick={this.toggleMode}>{modeText}</button>
 
         <div>
           <ExtrasComponent