Adjusted the hostname in .pageTop to fit mobile devices better.

Author: xcjs

src/app/theme/components/pageTop/pageTop.html

@@ -3,7 +3,7 @@
     <a href class="collapse-menu-link ion-navicon" ba-sidebar-toggle-menu></a>
 
     <div class="navbar-right">
-        <h1 class="navbar-text">
+        <h1 class="hostname">
             <img ng-src="/assets/img/app/distros/{{system.distro.id}}.svg" img-load-error alt="System Distributor Logo">
             {{system.host.toUpperCase()}}
         </h1>

src/sass/main.scss

@@ -5,7 +5,8 @@
 
 h1 > img {
   height: 1em;
-  vertical-align: bottom;
+  padding: 0 .25em 0 0;
+  vertical-align: middle;
   width: auto;
 }
 
@@ -20,10 +21,17 @@ td > img {
 
 .navbar-right {
   float: right;
+  height: 100%;
+  max-width: 40%;
 }
 
-.navbar-text {
-  color: $primary-light;
+.hostname {
+  color: rgb(255, 255, 255);
+  font-size: 24px;
+  line-height: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .table > thead:first-child > tr:first-child > th.text-left,