Limit size of tab title per screen size

#12014

sao/src/sao.less

@@ -152,6 +152,51 @@ html[theme="default"] {
 #menu, #tabs {
     margin-top: 5px;
     padding-bottom: 5px;
+
+    .navbar-brand {
+        .title {
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-md-max) {
+    #menu, #tabs {
+        .navbar-brand {
+            .title {
+                max-width: 180px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: @screen-sm-max) {
+    #menu, #tabs {
+        .navbar-brand {
+            .title {
+                max-width: 170px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: @screen-xs-max) {
+    #menu, #tabs {
+        padding-left: 0;
+        padding-right: 0;
+
+        .navbar-brand {
+            padding-left: 0;
+            padding-right: 0;
+
+            .title {
+                max-width: 70px;
+            }
+        }
+    }
 }
 
 #menu {
@@ -276,6 +321,11 @@ html.accesskey {
         position: sticky;
         top: 0px;
         z-index: @zindex-navbar - 1;
+
+        .close {
+            margin-right: 5px;
+            margin-left: 5px;
+        }
     }
 
     .navbar-text {
@@ -321,6 +371,13 @@ html.accesskey {
     }
 }
 
+@media screen and (max-width: @screen-xs-max) {
+    nav.toolbar {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
 .modal-body {
     overflow-x: auto;
     max-height: calc(100vh - 200px);

sao/src/tab.js

@@ -12,10 +12,10 @@
             this.id = 'tab-' + Sao.Tab.counter++;
             this.name_el = jQuery('<span/>');
             this.name_short_el = jQuery('<span/>', {
-                'class': 'hidden-xs hidden-sm',
+                'class': 'hidden-xs hidden-sm hidden-md',
             }).appendTo(this.name_el);
             this.name_long_el = jQuery('<span/>', {
-                'class': 'hidden-md hidden-lg',
+                'class': 'hidden-lg',
             }).appendTo(this.name_el);
             this.view_prm = jQuery.when();
         },
@@ -192,12 +192,12 @@
             }).append(jQuery('<span/>', {
                 'class': 'title'
             }).append(jQuery('<span/>', {
-                'class': 'title-long hidden-xs hidden-sm',
-            })).append(jQuery('<span/>', {
-                'class': 'title-short hidden-md hidden-lg',
+                'class': 'title-long hidden-xs hidden-sm hidden-md',
             })).append(jQuery('<span/>', {
+                'class': 'title-short hidden-lg',
+            }))).append(jQuery('<span/>', {
                 'class': 'caret'
-            })))).append(jQuery('<ul/>', {
+            }))).append(jQuery('<ul/>', {
                 'class': 'dropdown-menu',
                 'role': 'menu'
             })).append(jQuery('<button/>', {
@@ -210,7 +210,7 @@
             }).append('&times;')).click(() => {
                 this.close();
             }))).append(jQuery('<div/>', {
-                'class': 'btn-toolbar navbar-right flip',
+                'class': 'btn-toolbar navbar-right pull-right flip',
                 'role': 'toolbar'
             })));
             this.set_menu(toolbar.find('ul[role*="menu"]'));