WIP Please Darshan take this: Calc: Mobile: top toolbar and formula

bar are broken

This changes from flex to grid (so we can have multiple columns and 2 rows)

darshan:
    - adding one more div and wrap all child of toolbar-wrapper execpt 'formulabr' will work here
    - i have tested the css grid approch it is breaking the mobile UI in Calc
    - here i have changed a bit in html and twiked css which covers all cases

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Ia50fda95e2bef57d707bb4be1dd34e2ec083bfc5

browser/css/device-mobile.css

@@ -167,6 +167,10 @@ textarea.cool-annotation-textarea {
 #toolbar-wrapper.mobile{
 	border-top: none;
 	z-index: auto !important;
+	flex-direction: column;
+}
+.toolbar-row {
+	display: flex;
 	flex-direction: row;
 }
 
@@ -183,6 +187,7 @@ textarea.cool-annotation-textarea {
 	padding-top: 0px;
 	padding-bottom: 0px;
 	background: transparent;
+	align-self: end;
 }
 nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolbar {
 	border-color: transparent;
@@ -208,6 +213,7 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
 #formulabar {
 	padding: 0px !important;
 	border-top: 1px solid #bbbbbb !important;
+	margin-bottom: 5px;
 }
 #formulabar > div > div {
 	grid-template-columns: 70px auto;

browser/html/cool.html.m4

@@ -202,15 +202,17 @@ m4_ifelse(MOBILEAPP,[true],
      </nav>
 
      <div id="toolbar-wrapper">
-       <div id="toolbar-logo"></div>
-       <div id="toolbar-mobile-back" class="editmode-off"></div>
-       <div class="jsdialog ui-spacer"></div>
-       <div id="toolbar-up"></div>
-       <div id="toolbar-hamburger">
-         <label class="main-menu-btn" for="main-menu-state">
-           <span class="main-menu-btn-icon" id="main-menu-btn-icon"></span>
-         </label>
-       </div>
+        <div id="toolbar-row" class="toolbar-row">
+          <div id="toolbar-logo"></div>
+          <div id="toolbar-mobile-back" class="editmode-off"></div>
+          <div class="jsdialog ui-spacer"></div>
+          <div id="toolbar-up"></div>
+          <div id="toolbar-hamburger">
+            <label class="main-menu-btn" for="main-menu-state">
+              <span class="main-menu-btn-icon" id="main-menu-btn-icon"></span>
+            </label>
+          </div>
+        </div>
        <div colspan="4" id="formulabar" style="display: none"></div>
     </div>