#116: improve userbar layout for small screens and long nicknames

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 {

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>

src/components/userbar/loggedInPanel.scss

@@ -1,3 +1,6 @@
+.loggedInPanel {
+    justify-content: flex-end;
+}
 
 .userIcon {
     composes: user from 'components/ui/icons.scss';

src/components/userbar/userbar.scss

@@ -1,2 +1,3 @@
 .userbar {
+    text-align: right;
 }

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