From b9aa969a56c94a9b121254729c781045d006e858 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Sat, 1 Aug 2020 17:12:29 +0300
Subject: [PATCH] - client: fix guide tab styles

---
 client/src/components/SetupGuide/Guide.css | 14 ++++++++++++++
 client/src/components/SetupGuide/index.js  |  4 ++--
 client/src/components/ui/Tabs.css          | 17 ++++++++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/client/src/components/SetupGuide/Guide.css b/client/src/components/SetupGuide/Guide.css
index 821f1798..86d3070b 100644
--- a/client/src/components/SetupGuide/Guide.css
+++ b/client/src/components/SetupGuide/Guide.css
@@ -13,3 +13,17 @@
     margin-bottom: 20px;
     font-size: 15px;
 }
+
+.guide__address {
+    display: block;
+    margin-bottom: 7px;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+@media screen and (min-width: 768px) {
+    .guide__address {
+        display: list-item;
+        font-size: 15px;
+    }
+}
diff --git a/client/src/components/SetupGuide/index.js b/client/src/components/SetupGuide/index.js
index c6d9c47d..4de6dd2c 100644
--- a/client/src/components/SetupGuide/index.js
+++ b/client/src/components/SetupGuide/index.js
@@ -24,8 +24,8 @@ const SetupGuide = ({
                 <div className="mt-1">
                     <Trans>install_devices_address</Trans>:
                 </div>
-                <div className="mt-2 font-weight-bold">
-                    {dnsAddresses.map((ip) => <li key={ip}>{ip}</li>)}
+                <div className="mt-3">
+                    {dnsAddresses.map((ip) => <li key={ip} className="guide__address">{ip}</li>)}
                 </div>
             </div>
             <Guide dnsAddresses={dnsAddresses} />
diff --git a/client/src/components/ui/Tabs.css b/client/src/components/ui/Tabs.css
index 871f399a..837cf3d8 100644
--- a/client/src/components/ui/Tabs.css
+++ b/client/src/components/ui/Tabs.css
@@ -2,8 +2,16 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: 15px;
-    padding: 15px 0;
+    padding: 10px 0;
     border-bottom: 1px solid #e8e8e8;
+    overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+    .tabs__controls {
+        padding: 15px 0;
+        overflow: initial;
+    }
 }
 
 .tabs__controls--form {
@@ -26,11 +34,18 @@
     align-items: center;
     min-width: 70px;
     font-size: 13px;
+    white-space: nowrap;
     color: #555555;
     cursor: pointer;
     opacity: 0.6;
 }
 
+@media screen and (min-width: 768px) {
+    .tab__control {
+        white-space: normal;
+    }
+}
+
 .tab__control:hover,
 .tab__control:focus {
     opacity: 1;