working on phone toolbar positionning

css/style.css

@@ -377,8 +377,13 @@ script {
   min-height : 2em ;
 }
 
+#pgm {
+  min-height : 39em ;
+  text-align : center ;
+}
+
 #pgm-main {
-  min-height : 35em ;
+  text-align : left ;
 }
 
 .pgm > .panel-heading {
@@ -392,10 +397,33 @@ script {
   margin-right : 10px ;
 }
 
+.height-wrapper {
+  position : absolute ;
+  top : 0 ;
+  height : calc(100% - 30px) ;
+  width : calc(100% - 30px) ;
+  max-height : 100vh ;
+  z-index : -1 ;
+}
+
+#phone-toolbar {
+  position : relative ;
+  z-index : 110 ;
+}
+
+#phone-toolbar > .btn-group {
+  bottom : 0 ;
+}
+
+
 #desktop-switches {
   margin-right : 10px ;
 }
 
+.block-add {
+  text-align : center ;
+}
+
 .pgm-recv {
   margin : 0 ;
   padding : 0 ;
@@ -541,15 +569,6 @@ input.add-target {
   display : none ;
 }
 
-#phone-toolbar {
-  position : fixed ;
-  bottom : 5px ;
-  left: 50%;
-  transform: translateX(-50%);
-  display : block ;
-}
-
-
 .fixed-top {
   position : fixed ;
   top : 10px ;

explorer.php

@@ -782,6 +782,26 @@
                   <span class="glyphicon glyphicon-plus"></span>
                 </li>
               </ul>
+              <!--{{{ mobile toolbar-->
+              <div class="height-wrapper">
+                <div class="btn-toolbar hidden" role="toolbar" id="phone-toolbar">
+                  <div class="btn-group" role="group">
+                    <button class="btn btn-default active" autofocus type="button" id="phone-tool-add">
+                      <span class="glyphicon glyphicon-plus"></span>
+                    </button>
+                    <button class="btn btn-default" type="button" id="phone-tool-cut">
+                      <span class="glyphicon glyphicon-scissors"></span>
+                    </button>
+                    <button class="btn btn-default" type="button" id="phone-tool-copy">
+                      <span class="glyphicon glyphicon-copy"></span>
+                    </button>
+                    <button class="btn btn-default" type="button" id="phone-tool-paste">
+                      <span class="glyphicon glyphicon-paste"></span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <!--}}}-->
             </div>
           </div>
           <!--}}}-->
@@ -798,24 +818,6 @@
           ?>
         </div>
     </div>
-    <!--{{{ mobile toolbar-->
-    <div class="btn-toolbar hidden" role="toolbar" id="phone-toolbar">
-      <div class="btn-group" role="group">
-        <button class="btn btn-default active" autofocus type="button" id="phone-tool-add">
-          <span class="glyphicon glyphicon-plus"></span>
-        </button>
-        <button class="btn btn-default" type="button" id="phone-tool-cut">
-          <span class="glyphicon glyphicon-scissors"></span>
-        </button>
-        <button class="btn btn-default" type="button" id="phone-tool-copy">
-          <span class="glyphicon glyphicon-copy"></span>
-        </button>
-        <button class="btn btn-default" type="button" id="phone-tool-paste">
-          <span class="glyphicon glyphicon-paste"></span>
-        </button>
-      </div>
-    </div>
-    <!--}}}-->
     <!--{{{ modals-->
     <!--{{{ notes deletion -->
     <div class="modal fade" id="local-delete-modal" tabindex="-1" role="dialog">