From 446bfbaa290af480aaa6df4f62e186569c368c3f Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sun, 5 Jun 2016 14:00:43 +0300
Subject: [PATCH] #116: improve userbar layout for small screens and long
 nicknames

---
 src/components/ui/button-groups.scss      | 11 +++++------
 src/components/userbar/LoggedInPanel.js   |  2 +-
 src/components/userbar/loggedInPanel.scss |  3 +++
 src/components/userbar/userbar.scss       |  1 +
 src/pages/root/root.scss                  |  6 +++++-
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/button-groups.scss b/src/components/ui/button-groups.scss
index b1515a9..1e526c2 100644
--- a/src/components/ui/button-groups.scss
+++ b/src/components/ui/button-groups.scss
@@ -1,15 +1,14 @@
-.group {
-    position: relative; // это нужно только чтобы postcss не удалял пустой класс и composes мог его схавать
-}
-
 .horizontalGroup {
-    composes: group;
+    display: flex;
 }
 
 .item {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
     $borderConfig: 1px solid rgba(#fff, 0.15);
 
-    float: left;
     border-left: $borderConfig;
 
     &:last-child {
diff --git a/src/components/userbar/LoggedInPanel.js b/src/components/userbar/LoggedInPanel.js
index f6d9c3f..8d9802d 100644
--- a/src/components/userbar/LoggedInPanel.js
+++ b/src/components/userbar/LoggedInPanel.js
@@ -27,7 +27,7 @@ export default class LoggedInPanel extends Component {
         const { user } = this.props;
 
         return (
-            <div className={buttonGroups.horizontalGroup}>
+            <div className={classNames(buttonGroups.horizontalGroup, styles.loggedInPanel)}>
                 <Link to="/" className={classNames(buttons.green, buttonGroups.item)}>
                     <span className={styles.userIcon} />
                     <span className={styles.userName}>{user.username}</span>
diff --git a/src/components/userbar/loggedInPanel.scss b/src/components/userbar/loggedInPanel.scss
index 0febb60..631a0ad 100644
--- a/src/components/userbar/loggedInPanel.scss
+++ b/src/components/userbar/loggedInPanel.scss
@@ -1,3 +1,6 @@
+.loggedInPanel {
+    justify-content: flex-end;
+}
 
 .userIcon {
     composes: user from 'components/ui/icons.scss';
diff --git a/src/components/userbar/userbar.scss b/src/components/userbar/userbar.scss
index 3139a48..dbeb0ed 100644
--- a/src/components/userbar/userbar.scss
+++ b/src/components/userbar/userbar.scss
@@ -1,2 +1,3 @@
 .userbar {
+    text-align: right;
 }
diff --git a/src/pages/root/root.scss b/src/pages/root/root.scss
index 34c8c85..8319512 100644
--- a/src/pages/root/root.scss
+++ b/src/pages/root/root.scss
@@ -36,6 +36,7 @@ $userBarHeight: 50px;
 
 .headerContent {
     composes: wrapper;
+    position: relative;
 }
 
 .logo {
@@ -65,5 +66,8 @@ $userBarHeight: 50px;
 }
 
 .userbar {
-    float: right;
+    position: absolute;
+    right: 0;
+    left: 115px;
+    top: 0;
 }