[SSE mobile] debug CellEditor styles

apps/spreadsheeteditor/mobile/app/template/Editor.template

@@ -7,12 +7,12 @@
                         <span id="ce-cell-name"></span>
                         <button id="ce-func-label" type="button" class="btn"><span class="btn-icon">&fnof;&#8333;&#8339;&#8334;</span></button>
                     </div>
-                    <div class="ce-group group-expand">
-                        <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&#10095;</span></button>
-                    </div>
                     <div class="ce-group group-content">
                         <textarea id="ce-cell-content" spellcheck="false" rows="1" cols="20"></textarea>
                     </div>
+                    <div class="ce-group group-expand">
+                        <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&#10095;</span></button>
+                    </div>
                 </div>
                 <div id="editor_sdk" class="page-content no-fastclick">
                 </div>

apps/spreadsheeteditor/mobile/resources/less/celleditor.less

@@ -16,6 +16,8 @@
     border-bottom: solid 1px @gray-dark;
     min-height: @cellEditorHeight;
     background-color: #fff;
+    display: flex;
+    align-items: stretch;
 
     .btn {
         border: 0 none;
@@ -23,14 +25,7 @@
         background-color: transparent;
     }
 
-    .caret {
-        display: block;
-        transform: rotate(90deg);
-        font-size: 16px;
-    }
-
     .ce-group {
-        height: @cellEditorHeight;
     }
 
     .group-name {
@@ -76,33 +71,31 @@
 
     .group-expand {
         float: right;
-
-        #ce-btn-expand {
-            width: @cellEditorHeight;
-            background: transparent;
-            padding: 0 2px 0;
-
-            &:active,
-            &.active {
-                .caret {
-                    background-color: #5d6c35;
-                    //background-position: @arrow-small-offset-x @arrow-small-offset-y;
-                }
-            }
-
-            &.btn-collapse {
-                .caret {
-                    background-color: #5d6c35;
-                    //background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;
-                }
-            }
-        }
     }
 
     .group-content {
         padding-left: 1px;
-        margin: 0 30px 0 128px;
         border-left: 1px solid @gray-dark;
+        flex-grow: 1;
+        height: 100%;
+    }
+
+    #ce-btn-expand {
+        width: @cellEditorHeight;
+        background: transparent;
+        padding: 0 2px 0;
+
+        .caret {
+            display: block;
+            transform: rotate(90deg);
+            font-size: 16px;
+        }
+
+        &.collapse {
+            .caret {
+                transform: rotate(-90deg);
+            }
+        }
     }
 
     #ce-cell-content {
@@ -116,7 +109,7 @@
 
         height: 100%;
         resize: none;
-        min-height: 19px;
+        min-height: @cellEditorHeight;
         border: 0 none;
         font-size: 16px;