Improve mobile UI

assets/stylesheets/components/_header.scss

@@ -31,6 +31,7 @@
 
 ._header-btn {
   position: relative;
+  flex: 0 0 auto;
   width: 2.25rem;
   height: 100%;
   color: $textColorLight;
@@ -220,10 +221,12 @@
   z-index: 2;
   top: .875rem;
   left: .875rem;
-  padding: 0 .5rem;
+  padding: 0 .375rem;
   line-height: 1.25rem;
-  font-size: .875rem;
+  max-width: 50%;
+  font-size: .8125rem;
   color: $textColorLight;
   background: darken($headerBackground, 5%);
   border-radius: 2px;
+  @extend %truncate-text;
 }

assets/stylesheets/components/_mobile.scss

@@ -23,7 +23,7 @@
     position: static;
     height: auto;
     margin: 0;
-    padding: .75rem 1rem 0;
+    padding: .75rem 1rem 1px;
 
     &:before { content: none; }
   }
@@ -46,14 +46,13 @@
 
   // Header
 
-  ._header-btn { width: 2.5rem; }
   ._header-btn[hidden] { display: block; }
 
   ._search {
     padding-right: .125rem;
     padding-left: .125rem;
 
-    &:before { left: .5rem; }
+    &:before { left: .625rem; }
   }
 
   ._search-tag { left: .5rem; }

assets/stylesheets/components/_page.scss

@@ -20,10 +20,12 @@
 
   iframe {
     display: block;
+    max-width: 100%;
     margin-bottom: 1em;
     padding: 1px;
     border: 1px dotted $boxBorder;
     border-radius: 3px;
+    @extend %border-box;
   }
 }
 

assets/stylesheets/components/_sidebar.scss

@@ -97,6 +97,7 @@
   cursor: default;
   background: $sidebarBackground;
   box-shadow: inset -1px 0 $sidebarBorder;
+  @extend %truncate-text;
 
   &, &:hover {
     color: inherit;
@@ -126,17 +127,10 @@
   }
 }
 
-._list-item, ._list-text {
-  overflow: hidden;
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow-wrap: normal;
-  text-overflow: ellipsis;
-}
-
 ._list-text {
   display: block;
   pointer-events: none;
+  @extend %truncate-text;
 }
 
 ._list-count, ._list-enable {

assets/stylesheets/global/_classes.scss

@@ -21,6 +21,14 @@
   @extend %user-select-none;
 }
 
+%truncate-text {
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+}
+
 //
 // Boxes
 //