Improved head on small devices

app/css/app_mobile.css

@@ -134,11 +134,13 @@ html {
 .navbar-quick-nav h4 {
   font-size: 14px;
   color: #FFF;
+  margin: 0;
   white-space: nowrap;
-  max-width: 100px;
+}
+.navbar-quick-back-title {
+  max-width: 130px;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 0;
 }
 .navbar-quick-media-back h4 {
   margin: 9px 0 12px 0;
@@ -173,8 +175,7 @@ html {
 .tg_page_head .navbar_offline > .container .navbar-brand {
   margin-right: 0;
 }
-.navbar_offline .navbar-quick-nav li > a > h4,
-.navbar_offline .navbar-quick-nav li > a > small,
+.navbar_offline .navbar-quick-nav li > a > .navbar-quick-back-title,
 .navbar_offline .im_head_attach,
 .navbar_offline .navbar-search-wrap {
   display: none;

app/partials/head.html

@@ -57,10 +57,12 @@
             <li>
               <a ng-click="toggleMedia()" class="navbar-quick-media-back" ng-switch="historyFilter.mediaType">
                 <i class="icon icon-back"></i>
-                <h4 ng-switch-when="photos">Photos</h4>
-                <h4 ng-switch-when="video">Videos</h4>
-                <h4 ng-switch-when="documents">Documents</h4>
-                <h4 ng-switch-when="audio">Voice messages</h4>
+                <div class="navbar-quick-back-title">
+                  <h4 ng-switch-when="photos">Photos</h4>
+                  <h4 ng-switch-when="video">Videos</h4>
+                  <h4 ng-switch-when="documents">Documents</h4>
+                  <h4 ng-switch-when="audio">Voice messages</h4>
+                </div>
               </a>
             </li>
           </ul>
@@ -68,19 +70,23 @@
             <li ng-switch-when="true">
               <a href="#/im" class="navbar-quick-profile-back">
                 <i class="icon icon-back"></i>
-                <h4 ng-bind-html="historyPeer.data.rFullName"></h4>
-                <small ng-bind="historyPeer.data | userStatus"></small>
+                <div class="navbar-quick-back-title">
+                  <h4 ng-bind-html="historyPeer.data.rFullName"></h4>
+                  <small ng-bind="historyPeer.data | userStatus"></small>
+                </div>
               </a>
             </li>
             <li ng-switch-default>
               <a href="#/im" class="navbar-quick-group-back">
                 <i class="icon icon-back"></i>
-                <h4 ng-bind-html="historyPeer.data.rTitle"></h4>
-                <small>
-                  <ng-pluralize count="historyPeer.data.participants_count"
-                                   when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
-                  </ng-pluralize>
-                </small>
+                <div class="navbar-quick-back-title">
+                  <h4 ng-bind-html="historyPeer.data.rTitle"></h4>
+                  <small>
+                    <ng-pluralize count="historyPeer.data.participants_count"
+                                     when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
+                    </ng-pluralize>
+                  </small>
+                </div>
               </a>
             </li>
           </ul>