From 9c566562c9caa1ef7154a615fa62c8fb6a1879dd Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Fri, 7 Apr 2017 15:04:38 +0200
Subject: [PATCH] Made view mode selector responsive. (#2421)

---
 .../app/scripts/components/view-mode-selector.js |  5 +++--
 client/app/styles/_base.scss                     | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/app/scripts/components/view-mode-selector.js b/client/app/scripts/components/view-mode-selector.js
index 8b3d6fed37..d4c6403bf2 100644
--- a/client/app/scripts/components/view-mode-selector.js
+++ b/client/app/scripts/components/view-mode-selector.js
@@ -21,9 +21,10 @@ const Item = (icons, label, isSelected, onClick, isEnabled = true) => {
     <div
       className={className}
       disabled={!isEnabled}
-      onClick={isEnabled && onClick}>
+      onClick={isEnabled && onClick}
+      title={`View ${label.toLowerCase()}`}>
       <span className={icons} style={{fontSize: 12}} />
-      <span>{label}</span>
+      <span className="label">{label}</span>
     </div>
   );
 };
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index d2e8602362..33e4b9ee27 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -227,6 +227,7 @@
     opacity: 0.9;
     margin-bottom: 3px;
     border: 1px solid transparent;
+    white-space: nowrap;
 
     &-active, &:hover {
       color: $text-color;
@@ -1234,6 +1235,7 @@
     border-radius: $border-radius;
     border: 1px solid $background-darker-color;
     display: inline-block;
+    white-space: nowrap;
   }
 
   &-action {
@@ -1301,10 +1303,12 @@
   }
 }
 
-.view-mode-selector-wrapper .fa {
-  margin-right: 4px;
-  margin-left: 0;
-  color: $text-secondary-color;
+.view-mode-selector-wrapper {
+  .label { margin-left: 4px; }
+  .fa {
+    margin-left: 0;
+    color: $text-secondary-color;
+  }
 }
 
 .network-selector-action {
@@ -1872,3 +1876,7 @@
     width: 25px;
   }
 }
+
+@media (max-width: 1330px) {
+  .view-mode-selector .label { display: none; }
+}