From cc6b9d4099b2ac7d1bff828be76ce9eb1f2a3e79 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 10 Aug 2016 16:43:14 -0700
Subject: [PATCH] [Frontend] Revised mobile styles for form layout

Fixes #1118
---
 .../res/sass/mobile/overlay/_overlay.scss     | 41 ++++++++-----------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
index a5459aa1d9..1feb4f1c9a 100644
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -25,7 +25,6 @@
 
 @include phone {
     .overlay > .holder {
-        //@include test(orange); // This works!
         $m: 0;
         border-radius: $m;
         top: $m;
@@ -38,36 +37,30 @@
         overflow: auto;
         @include transform(none);
 
-        .editor .form .form-row {
-            > .label,
-            > .controls {
-                //@include test(blue);
-                display: block;
-                float: none;
-                width: 100%;
-            }
-            > .label {
-                &:after {
-                    float: none;
+        .editor .form .form-row.l-flex-row  {
+            // Display elements in a columnar view
+            @include flex-direction(column);
+            > .flex-elem {
+                &:not(:first-child) {
+                    margin-top: $interiorMargin;
+                }
+                &.label {
+                    width: 100%;
+                }
+                &.controls {
+                    overflow: auto;
                 }
             }
-        }
-        
-        .contents {
-            .abs.top-bar,
-            .abs.editor,
-            .abs.message-body,
-            .abs.bottom-bar {
-                //@include test(orange);
-                top: auto; right: auto; bottom: auto; left: auto;
-                height: auto; width: auto;
-                margin-bottom: $interiorMarginLg * 2;
+
+            &.validates > .label:before {
                 position: relative;
+                right: auto;
+                line-height: inherit;
+                margin-right: $interiorMargin;
             }
         }
     }
     .t-dialog-sm .overlay > .holder {
-        //@include test(blue);
         height: auto; max-height: 100%;
     }
 }