Cleans up mobile and resized pinned tabs

assets/components/LogContainer.vue

@@ -1,14 +1,14 @@
 <template>
   <scrollable-view :scrollable="scrollable" v-if="container">
     <template v-slot:header v-if="showTitle">
-      <div class="columns is-vcentered">
+      <div class="columns is-vcentered pr-4">
         <div class="column is-narrow">
           <container-title :value="container.name" @close="$emit('close')"></container-title>
         </div>
-        <div class="column">
+        <div class="column is-clipped">
           <container-stat :stat="container.stat" :state="container.state"></container-stat>
         </div>
-        <div class="column is-narrow mr-4" v-if="closable">
+        <div class="column is-narrow" v-if="closable">
           <button class="delete is-medium" @click="$emit('close')"></button>
         </div>
       </div>

assets/components/MobileMenu.vue

@@ -1,13 +1,5 @@
 <template>
   <aside>
-    <a
-      role="button"
-      class="navbar-burger burger is-hidden-tablet is-pulled-right"
-      @click="showNav = !showNav"
-      :class="{ 'is-active': showNav }"
-    >
-      <span></span> <span></span> <span></span>
-    </a>
     <div class="columns is-marginless is-gapless is-mobile is-vcentered">
       <div class="column is-narrow">
         <router-link :to="{ name: 'default' }">
@@ -16,9 +8,20 @@
           </svg>
         </router-link>
       </div>
-      <div class="column ml-4 is-family-monospace" v-if="$route.name == 'container'">
+      <div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container'">
         {{ allContainersById[$route.params.id].name }}
       </div>
+
+      <div class="column is-narrow">
+        <a
+          role="button"
+          class="navbar-burger burger is-hidden-tablet is-pulled-right"
+          @click="showNav = !showNav"
+          :class="{ 'is-active': showNav }"
+        >
+          <span></span> <span></span> <span></span>
+        </a>
+      </div>
     </div>
 
     <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
@@ -29,7 +32,7 @@
           active-class="is-active"
           :title="item.name"
         >
-          <div class="hide-overflow">
+          <div class="is-ellipsis">
             {{ item.name }}
           </div>
         </router-link>
@@ -74,11 +77,6 @@ aside {
   .menu-label {
     margin-top: 1em;
   }
-  .hide-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
 
   .title {
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

assets/components/SideMenu.vue

@@ -28,7 +28,7 @@
           active-class="is-active"
           :title="item.name"
         >
-          <div class="hide-overflow">
+          <div class="is-ellipsis">
             <span
               @click.stop.prevent="appendActiveContainer(item)"
               class="icon is-small will-append-container"
@@ -82,12 +82,6 @@ aside {
   position: fixed;
   width: inherit;
 
-  .hide-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
   .is-hidden-mobile.is-active {
     display: block !important;
   }

assets/styles.scss

@@ -139,3 +139,9 @@ html.has-custom-scrollbars {
 .splitpanes__pane {
   overflow: unset;
 }
+
+.is-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}