fixed mobile header paddings

src/components/main/Header/style.scss

@@ -13,6 +13,7 @@
 
   @include tablet {
     height: 64px;
+    padding: 0 $gap;
   }
 
   &.is_scrolled {

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}

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;
+  }
 }