improve layout when on-edit

lib/views/widget/page_tabs.html

@@ -20,7 +20,7 @@
     Right Tabs
   #}
   {% if not isPortal %}
-  <li class="dropdown pull-right">
+  <li class="nav-main-right-tab dropdown pull-right">
     <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
       <i class="icon-options-vertical"></i>
     </a>
@@ -35,7 +35,7 @@
     </ul>
   </li>
   {% elseif ('/' !== path) %}
-  <li class="dropdown pull-right">
+  <li class="nav-main-right-tab dropdown pull-right">
     <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
       <i class="icon-options-vertical"></i>
     </a>
@@ -45,8 +45,8 @@
   </li>
   {% endif %}
 
-  <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="icon-layers"></i> History</a></li>
-  <li class="pull-right"><a href="?presentation=1" class="toggle-presentation"><i class="icon-film"></i> {{ t('Presentation Mode') }}</a></li>
+  <li class="nav-main-right-tab pull-right"><a href="#revision-history" data-toggle="tab"><i class="icon-layers"></i> History</a></li>
+  <li class="nav-main-right-tab pull-right"><a href="?presentation=1" class="toggle-presentation"><i class="icon-film"></i> {{ t('Presentation Mode') }}</a></li>
 
 </ul>
 

resource/styles/scss/_on-edit.scss

@@ -29,6 +29,16 @@ body.on-edit {
     display: none;
   }
 
+  /*
+   * right tabs
+   */
+  .nav-main-right-tab:not(.dropdown) {
+    // hide if screen size is less than smartphone
+    @media (max-width: $screen-xs-max) {
+      display: none;
+    }
+  }
+
   /*****************
    * Expand Editor
    *****************/
@@ -114,11 +124,12 @@ body.on-edit {
 
   .row.bg-title {
     $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin
+    $right-margin: 128px + 94px;                        // width of presentation and history tabs width
 
     position: absolute;
     z-index: 1;
     left: $left-margin;
-    min-width: calc(100% - #{$left-margin});
+    min-width: calc(100% - #{$left-margin} - #{$right-margin});
 
     // for crowi layout
     > .col-md-9, .col-xs-12 {
@@ -132,6 +143,11 @@ body.on-edit {
       font-size: 20px;
       line-height: 1em;
     }
+
+    // hide if screen size is less than smartphone
+    @media (max-width: $screen-xs-max) {
+      display: none;
+    }
   }
 
   /*****************