From e48f19309a292942e0b8b997ad26753676f766b9 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 25 Nov 2019 17:53:01 +0700
Subject: [PATCH] fixed mobile header paddings

---
 src/components/main/Header/style.scss      |  1 +
 src/components/main/UserButton/index.tsx   |  4 +++-
 src/components/main/UserButton/styles.scss | 12 +++++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss
index 002e5860..be051064 100644
--- a/src/components/main/Header/style.scss
+++ b/src/components/main/Header/style.scss
@@ -13,6 +13,7 @@
 
   @include tablet {
     height: 64px;
+    padding: 0 $gap;
   }
 
   &.is_scrolled {
diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx
index b29d1d1b..bb5c55d8 100644
--- a/src/components/main/UserButton/index.tsx
+++ b/src/components/main/UserButton/index.tsx
@@ -16,7 +16,9 @@ interface IProps {
 const UserButton: FC<IProps> = ({ user: { username, photo }, onProfileClick, onLogout }) => (
   <div className={styles.wrap}>
     <Group horizontal className={styles.user_button}>
-      <div onClick={onProfileClick}>{username}</div>
+      <div className={styles.username} onClick={onProfileClick}>
+        {username}
+      </div>
 
       <div
         className={styles.user_avatar}
diff --git a/src/components/main/UserButton/styles.scss b/src/components/main/UserButton/styles.scss
index c6df0518..1cbac717 100644
--- a/src/components/main/UserButton/styles.scss
+++ b/src/components/main/UserButton/styles.scss
@@ -19,7 +19,7 @@
   padding: $gap;
 
   &::after {
-    content: " ";
+    content: ' ';
     width: 0;
     height: 0;
     border-style: solid;
@@ -88,4 +88,14 @@
     width: 24px;
     height: 24px;
   }
+
+  @include tablet {
+    margin-left: 0 !important;
+  }
+}
+
+.username {
+  @include tablet {
+    display: none;
+  }
 }