From cd27e73917dfabd8922bd27425e660e3c8b47a80 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Mon, 7 Oct 2019 16:39:54 +0200
Subject: [PATCH] fix: improve challenge layout on mobile (#37029)

---
 .../src/templates/Challenges/classic/MobileLayout.js  |  2 +-
 client/src/templates/Challenges/classic/classic.css   | 11 ++++++-----
 .../templates/Challenges/components/tool-panel.css    |  4 +++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/templates/Challenges/classic/MobileLayout.js b/client/src/templates/Challenges/classic/MobileLayout.js
index 99331b2d9c..94769fa0c1 100644
--- a/client/src/templates/Challenges/classic/MobileLayout.js
+++ b/client/src/templates/Challenges/classic/MobileLayout.js
@@ -59,7 +59,7 @@ class MobileLayout extends Component {
           id='challenge-page-tabs'
           onSelect={moveToTab}
         >
-          <TabPane eventKey={1} title='Instructions'>
+          <TabPane eventKey={1} title='Info'>
             {instructions}
           </TabPane>
           <TabPane eventKey={2} title='Code' {...editorTabPaneProps}>
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 4f735f20a9..7815f3549d 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -23,6 +23,8 @@
 
 #challenge-page-tabs .nav-tabs > li > a {
   padding: 5px 10px;
+  text-decoration: none;
+  font-size: 0.8em;
 }
 
 #challenge-page-tabs .tab-content {
@@ -34,9 +36,8 @@
   height: 100%;
   overflow: hidden;
 }
-#challenge-page-tabs a {
-  text-decoration: none;
-}
-#challenge-page-tabs a:hover {
-  color: var(--secondary-background);
+
+#challenge-page-tabs .nav-tabs > li.active > a {
+  color: var(--quaternary-color);
+  background-color: var(--quaternary-background);
 }
diff --git a/client/src/templates/Challenges/components/tool-panel.css b/client/src/templates/Challenges/components/tool-panel.css
index 1ac5088591..8c95d4bc0e 100644
--- a/client/src/templates/Challenges/components/tool-panel.css
+++ b/client/src/templates/Challenges/components/tool-panel.css
@@ -5,7 +5,7 @@
 
 .tool-panel-group-mobile button,
 .tool-panel-group-mobile a {
-  font-size: 16px;
+  font-size: 0.8rem;
 }
 
 .tool-panel-group-mobile {
@@ -16,4 +16,6 @@
 
 .tool-panel-group-mobile .btn-block + .btn-block {
   margin: 0 2px 0 0;
+  padding-left: 8px;
+  padding-right: 8px;
 }