From 371669fbceb1c3489fddb48d9f7057518f960396 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Tue, 2 Feb 2016 15:36:43 -0800
Subject: [PATCH] [Frontend] Mods in progress to form layout

open #638
Major progress on form-row markup and CSS when
in Inspector 'part' context; General fixes cleanups
to custom checkbox/radio CSS;
---
 .../templates/browse/object-properties.html   |   6 +-
 .../commonUI/general/res/sass/_inspector.scss |  12 +-
 .../general/res/sass/controls/_controls.scss  |  13 +-
 .../general/res/sass/forms/_elems.scss        |  46 ++++--
 .../res/templates/object-inspector.html       |   2 +-
 .../espresso/res/css/theme-espresso.css       | 139 +++++++++++-------
 .../themes/snow/res/css/theme-snow.css        | 139 +++++++++++-------
 .../res/templates/plot-options-browse.html    |  60 ++++----
 platform/forms/res/templates/form.html        |  12 +-
 9 files changed, 264 insertions(+), 165 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse/object-properties.html b/platform/commonUI/browse/res/templates/browse/object-properties.html
index 8a837160c6..9e9e21079e 100644
--- a/platform/commonUI/browse/res/templates/browse/object-properties.html
+++ b/platform/commonUI/browse/res/templates/browse/object-properties.html
@@ -22,7 +22,7 @@
 <div ng-controller="ObjectInspectorController as controller">
     <ul class="flex-elem grows l-inspector-part">
         <li>
-            <em>Properties</em>
+            <em class="t-inspector-part-header">Properties</em>
             <div class="inspector-properties"
                  ng-repeat="data in metadata"
                  ng-class="{ first:$index === 0 }">
@@ -31,7 +31,7 @@
             </div>
         </li>
         <li ng-if="contextutalParents.length > 0">
-            <em title="The location of this linked object.">Location</em>
+            <em class="t-inspector-part-header" title="The location of this linked object.">Location</em>
             <span class="inspector-location"
                   ng-repeat="parent in contextutalParents"
                   ng-class="{ last:($index + 1) === contextualParents.length }">
@@ -44,7 +44,7 @@
             </span>
         </li>
         <li ng-if="primaryParents.length > 0">
-            <em title="The location of the original object that this was linked from.">Original Location</em>
+            <em class="t-inspector-part-header" title="The location of the original object that this was linked from.">Original Location</em>
             <span class="inspector-location"
                   ng-repeat="parent in primaryParents"
                   ng-class="{ last:($index + 1) === primaryParents.length }">
diff --git a/platform/commonUI/general/res/sass/_inspector.scss b/platform/commonUI/general/res/sass/_inspector.scss
index 75013dd185..a59c532df4 100644
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@@ -60,10 +60,18 @@
     .l-inspector-part {
         @include box-sizing(border-box);
         padding-right: $interiorMargin;
+        .form {
+            margin-left: $treeVCW + $interiorMarginLg;
+            .form-row {
+                @include align-items(center);
+                border: none;
+                padding: 0;
+            }
+        }
     }
 
     ul li,
-    em {
+    em.t-inspector-part-header {
         display: block;
         position: relative;
     }
@@ -72,7 +80,7 @@
         margin-bottom: $interiorMarginLg;
     }
     
-    em {
+    em.t-inspector-part-header {
         @include border-radius($basicCr);
         background-color: $colorInspectorSectionHeaderBg;
         color: $colorInspectorSectionHeaderFg;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 415b612155..61fd350d96 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -115,26 +115,25 @@ label.radio.custom {
     $d: $formRowCtrlsH;
     cursor: pointer;
     display: inline-block;
-    line-height: $d;
+    //line-height: $d;
     margin-right: $interiorMargin * 4;
     padding-left: $d + $interiorMargin;
     position: relative;
-    vertical-align: middle; // was top
+    //vertical-align: middle; // was top
     em {
         color: $colorBodyFg;
         display: inline-block;
         height: $d;
-        min-width: $d;
+        width: $d;
         &:before {
             @include border-radius($basicCr * .75);
             background: $bg;
             @include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
             box-sizing: border-box;
-            content: " ";
+            content: "";
             font-family: 'symbolsfont';
             font-size: 0.8em;
             display: inline-block;
-            margin-right: $interiorMargin;
             height: $d;
             width: $d;
             left: 0;
@@ -336,7 +335,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
 /******************************************************** SLIDERS */
 
 .slider {
-    $knobH: 100%; //14px;
+    $knobH: 100%;
     .slot {
         width: auto;
         position: absolute;
@@ -372,7 +371,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
         background-color: $sliderColorRange;
         cursor: ew-resize;
         position: absolute;
-        top: 0; //$tbOffset;
+        top: 0;
         right: auto;
         bottom: 0;
         left: auto;
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 2e7f87ef9a..ace8d91cee 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -23,7 +23,6 @@
 	@include border-radius($basicCr);
 	background: $colorFormSectionHeader;
 	$c: lighten($colorBodyFg, 20%);
-	//border-bottom: 1px solid rgba(#fff, 0.3);
 	color: $c;
 	font-size: 0.8em;
 	padding: $formTBPad $formLRPad;
@@ -32,6 +31,7 @@
 
 .form {
 	color: $colorFormText;
+    width: 100%;
 	.form-section {
 		position: relative;
 		margin-bottom: $interiorMarginLg * 2;
@@ -60,28 +60,24 @@
 
 		>.label {
 			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
-			//@include test(orange, 0.05);
-			float: left;
 			min-width: 120px;
+            order: 1;
             position: relative;
 			white-space: nowrap;
 			width: $formLabelW;
 		}
 
 		.value {
-			color: $colorInputFg; //lighten($colorBodyFg, 20%);
+			color: $colorInputFg;
 		}
 
 		.controls {
-			float: left;
+            order: 2;
             position: relative;
-			width: 99.9% - $formLabelW; // Start with less than 100% for Firefox
+            @include flex(1 1 auto);
 
 			.l-composite-control {
-//				display: inline-block;
 				&.l-checkbox {
-//					@include test();
-//					height: $formRowCtrlsH;
 					display: inline-block;
 					line-height: $formRowCtrlsH;
 					margin-right: 5px;
@@ -115,7 +111,6 @@
 			$h: 150px;
 			position: relative;
 			height: $h;
-//			max-width: 50%;
 			>.wrapper {
 				$p: $interiorMargin;
 				overflow: auto;
@@ -129,6 +124,37 @@
 	}
 }
 
+.l-controls-first {
+    .form .form-row {
+        margin-top: $interiorMarginSm;
+        >.label,
+        >.controls {
+            line-height: inherit;
+            min-height: inherit;;
+        }
+        >.label {
+            @include flex(1 1 auto);
+            min-width: 0;
+            width: auto;
+            order: 2;
+        }
+        >.controls {
+            @include flex(0 0 auto);
+            margin-right: $interiorMargin;
+            order: 1;
+        }
+    }
+}
+
+.no-validate {
+    .form .form-row >.label {
+        padding-right: 0;
+        &:after {
+            display: none;
+        }
+    }
+}
+
 label.form-control.checkbox {
 	input {
 		margin-right: $interiorMargin;
diff --git a/platform/commonUI/general/res/templates/object-inspector.html b/platform/commonUI/general/res/templates/object-inspector.html
index 813f244b47..56eaeb86cc 100644
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ b/platform/commonUI/general/res/templates/object-inspector.html
@@ -36,7 +36,7 @@
             <mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
             <div class="split-pane-component pane bottom">
                 <div class="abs holder holder-elements l-flex-col">
-                    <em class="flex-elem">Elements</em>
+                    <em class="flex-elem t-inspector-part-header">Elements</em>
                     <mct-representation
                             key="'edit-elements'"
                             mct-object="domainObject"
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 442815713f..eeeada1c6b 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -1491,16 +1491,25 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding-right: 5px; }
-  /* line 65, ../../../../general/res/sass/_inspector.scss */
+    /* line 63, ../../../../general/res/sass/_inspector.scss */
+    .l-inspect .l-inspector-part .form {
+      margin-left: 20px; }
+      /* line 65, ../../../../general/res/sass/_inspector.scss */
+      .l-inspect .l-inspector-part .form .form-row {
+        -webkit-align-items: center;
+        align-items: center;
+        border: none;
+        padding: 0; }
+  /* line 73, ../../../../general/res/sass/_inspector.scss */
   .l-inspect ul li,
-  .l-inspect em {
+  .l-inspect em.t-inspector-part-header {
     display: block;
     position: relative; }
-  /* line 71, ../../../../general/res/sass/_inspector.scss */
+  /* line 79, ../../../../general/res/sass/_inspector.scss */
   .l-inspect ul li {
     margin-bottom: 10px; }
-  /* line 75, ../../../../general/res/sass/_inspector.scss */
-  .l-inspect em {
+  /* line 83, ../../../../general/res/sass/_inspector.scss */
+  .l-inspect em.t-inspector-part-header {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -1509,21 +1518,21 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     margin-bottom: 5px;
     padding: 5px 5px;
     text-transform: uppercase; }
-  /* line 84, ../../../../general/res/sass/_inspector.scss */
+  /* line 92, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-properties {
     padding: 3px 0; }
-    /* line 85, ../../../../general/res/sass/_inspector.scss */
+    /* line 93, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-properties:not(.first) {
       border-top: 1px solid rgba(255, 255, 255, 0.1); }
-    /* line 89, ../../../../general/res/sass/_inspector.scss */
+    /* line 97, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-properties .label {
       color: #737373;
       text-transform: uppercase; }
-    /* line 93, ../../../../general/res/sass/_inspector.scss */
+    /* line 101, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-properties .value {
       color: #bfbfbf;
       word-break: break-all; }
-  /* line 100, ../../../../general/res/sass/_inspector.scss */
+  /* line 108, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-location .location-item {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -1533,18 +1542,18 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     line-height: 1.2em;
     position: relative;
     padding: 2px 4px; }
-    /* line 109, ../../../../general/res/sass/_inspector.scss */
+    /* line 117, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-location .location-item .t-object-label .t-item-icon {
       height: 1.2em;
       width: 0.7rem; }
-    /* line 114, ../../../../general/res/sass/_inspector.scss */
+    /* line 122, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-location .location-item:hover {
       background: rgba(153, 153, 153, 0.1);
       color: #cccccc; }
-      /* line 117, ../../../../general/res/sass/_inspector.scss */
+      /* line 125, ../../../../general/res/sass/_inspector.scss */
       .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
         color: #33ccff; }
-  /* line 122, ../../../../general/res/sass/_inspector.scss */
+  /* line 130, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
     color: #737373;
     content: '\3e';
@@ -1555,15 +1564,15 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     line-height: inherit;
     margin-left: 3px;
     width: 4px; }
-  /* line 135, ../../../../general/res/sass/_inspector.scss */
+  /* line 143, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .holder-elements .current-elements {
     position: relative; }
-    /* line 138, ../../../../general/res/sass/_inspector.scss */
+    /* line 146, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .holder-elements .current-elements .tree-item .t-object-label {
       font-size: 0.75rem;
       left: 0; }
 
-/* line 149, ../../../../general/res/sass/_inspector.scss */
+/* line 157, ../../../../general/res/sass/_inspector.scss */
 .l-inspect .splitter-inspect-panel,
 .l-inspect .split-pane-component.pane.bottom {
   -moz-transition-property: opacity;
@@ -1585,10 +1594,10 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
   opacity: 0;
   pointer-events: none; }
 
-/* line 158, ../../../../general/res/sass/_inspector.scss */
+/* line 166, ../../../../general/res/sass/_inspector.scss */
 .s-status-editing .l-inspect .location-item {
   pointer-events: none; }
-/* line 159, ../../../../general/res/sass/_inspector.scss */
+/* line 167, ../../../../general/res/sass/_inspector.scss */
 .s-status-editing .l-inspect .splitter-inspect-panel,
 .s-status-editing .l-inspect .split-pane-component.pane.bottom {
   opacity: 1;
@@ -2298,18 +2307,16 @@ label.checkbox.custom,
 label.radio.custom {
   cursor: pointer;
   display: inline-block;
-  line-height: 14px;
   margin-right: 20px;
   padding-left: 19px;
-  position: relative;
-  vertical-align: middle; }
+  position: relative; }
   /* line 123, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom em,
   label.radio.custom em {
     color: #999;
     display: inline-block;
     height: 14px;
-    min-width: 14px; }
+    width: 14px; }
     /* line 128, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom em:before,
     label.radio.custom em:before {
@@ -2321,11 +2328,10 @@ label.radio.custom {
       -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       box-sizing: border-box;
-      content: " ";
+      content: "";
       font-family: 'symbolsfont';
       font-size: 0.8em;
       display: inline-block;
-      margin-right: 5px;
       height: 14px;
       width: 14px;
       left: 0;
@@ -3948,12 +3954,13 @@ mct-include.l-time-controller {
 
 /* line 33, ../../../../general/res/sass/forms/_elems.scss */
 .form {
-  color: rgba(255, 255, 255, 0.5); }
-  /* line 35, ../../../../general/res/sass/forms/_elems.scss */
+  color: rgba(255, 255, 255, 0.5);
+  width: 100%; }
+  /* line 36, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-section {
     position: relative;
     margin-bottom: 20px; }
-  /* line 40, ../../../../general/res/sass/forms/_elems.scss */
+  /* line 41, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -3964,10 +3971,10 @@ mct-include.l-time-controller {
     margin-top: 5px;
     padding: 5px 0;
     position: relative; }
-    /* line 48, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 49, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row.first {
       border-top: none; }
-    /* line 52, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 53, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row > .label,
     .form .form-row > .controls {
       -moz-box-sizing: border-box;
@@ -3978,42 +3985,43 @@ mct-include.l-time-controller {
       font-size: 0.8rem;
       line-height: 22px;
       min-height: 22px; }
-    /* line 61, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 62, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row > .label {
-      float: left;
       min-width: 120px;
+      order: 1;
       position: relative;
       white-space: nowrap;
       width: 30%; }
-    /* line 71, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 73, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .value {
       color: #cccccc; }
-    /* line 75, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 77, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .controls {
-      float: left;
+      order: 2;
       position: relative;
-      width: 69.9%; }
-      /* line 82, ../../../../general/res/sass/forms/_elems.scss */
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto; }
+      /* line 85, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .l-composite-control.l-checkbox {
         display: inline-block;
         line-height: 14px;
         margin-right: 5px; }
-      /* line 91, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 93, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .l-med input[type="text"] {
         width: 200px; }
-      /* line 95, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 97, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .l-small input[type="text"] {
         width: 50px; }
-      /* line 99, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 101, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .l-numeric input[type="text"] {
         text-align: right; }
-      /* line 103, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 105, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .select {
         margin-right: 5px; }
-    /* line 108, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 110, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .field-hints {
       color: #666666; }
-    /* line 112, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 114, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .selector-list {
       -moz-appearance: none;
       -webkit-appearance: none;
@@ -4036,7 +4044,7 @@ mct-include.l-time-controller {
       /* line 327, ../../../../general/res/sass/_mixins.scss */
       .form .form-row .selector-list.error {
         background: rgba(255, 0, 0, 0.5); }
-      /* line 119, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 121, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .selector-list > .wrapper {
         overflow: auto;
         position: absolute;
@@ -4045,24 +4053,53 @@ mct-include.l-time-controller {
         bottom: 5px;
         left: 5px; }
 
-/* line 133, ../../../../general/res/sass/forms/_elems.scss */
+/* line 135, ../../../../general/res/sass/forms/_elems.scss */
+.l-controls-first .form .form-row {
+  margin-top: 3px; }
+  /* line 138, ../../../../general/res/sass/forms/_elems.scss */
+  .l-controls-first .form .form-row > .label,
+  .l-controls-first .form .form-row > .controls {
+    line-height: inherit;
+    min-height: inherit; }
+  /* line 143, ../../../../general/res/sass/forms/_elems.scss */
+  .l-controls-first .form .form-row > .label {
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+    order: 2; }
+  /* line 149, ../../../../general/res/sass/forms/_elems.scss */
+  .l-controls-first .form .form-row > .controls {
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+    margin-right: 5px;
+    order: 1; }
+
+/* line 158, ../../../../general/res/sass/forms/_elems.scss */
+.no-validate .form .form-row > .label {
+  padding-right: 0; }
+  /* line 160, ../../../../general/res/sass/forms/_elems.scss */
+  .no-validate .form .form-row > .label:after {
+    display: none; }
+
+/* line 167, ../../../../general/res/sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 139, ../../../../general/res/sass/forms/_elems.scss */
+/* line 173, ../../../../general/res/sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 144, ../../../../general/res/sass/forms/_elems.scss */
+/* line 178, ../../../../general/res/sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 151, ../../../../general/res/sass/forms/_elems.scss */
+  /* line 185, ../../../../general/res/sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -4072,7 +4109,7 @@ label.form-control.checkbox input {
     color: #ffad99;
     padding: 5px; }
 
-/* line 160, ../../../../general/res/sass/forms/_elems.scss */
+/* line 194, ../../../../general/res/sass/forms/_elems.scss */
 input[type="text"],
 input[type="search"] {
   -moz-appearance: none;
@@ -4095,12 +4132,12 @@ input[type="search"] {
   input[type="text"].error,
   input[type="search"].error {
     background: rgba(255, 0, 0, 0.5); }
-  /* line 163, ../../../../general/res/sass/forms/_elems.scss */
+  /* line 197, ../../../../general/res/sass/forms/_elems.scss */
   input[type="text"].numeric,
   input[type="search"].numeric {
     text-align: right; }
 
-/* line 168, ../../../../general/res/sass/forms/_elems.scss */
+/* line 202, ../../../../general/res/sass/forms/_elems.scss */
 textarea {
   -moz-appearance: none;
   -webkit-appearance: none;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 1df8fd1c07..d252032321 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -1472,16 +1472,25 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding-right: 5px; }
-  /* line 65, ../../../../general/res/sass/_inspector.scss */
+    /* line 63, ../../../../general/res/sass/_inspector.scss */
+    .l-inspect .l-inspector-part .form {
+      margin-left: 20px; }
+      /* line 65, ../../../../general/res/sass/_inspector.scss */
+      .l-inspect .l-inspector-part .form .form-row {
+        -webkit-align-items: center;
+        align-items: center;
+        border: none;
+        padding: 0; }
+  /* line 73, ../../../../general/res/sass/_inspector.scss */
   .l-inspect ul li,
-  .l-inspect em {
+  .l-inspect em.t-inspector-part-header {
     display: block;
     position: relative; }
-  /* line 71, ../../../../general/res/sass/_inspector.scss */
+  /* line 79, ../../../../general/res/sass/_inspector.scss */
   .l-inspect ul li {
     margin-bottom: 10px; }
-  /* line 75, ../../../../general/res/sass/_inspector.scss */
-  .l-inspect em {
+  /* line 83, ../../../../general/res/sass/_inspector.scss */
+  .l-inspect em.t-inspector-part-header {
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
@@ -1490,21 +1499,21 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     margin-bottom: 5px;
     padding: 5px 5px;
     text-transform: uppercase; }
-  /* line 84, ../../../../general/res/sass/_inspector.scss */
+  /* line 92, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-properties {
     padding: 3px 0; }
-    /* line 85, ../../../../general/res/sass/_inspector.scss */
+    /* line 93, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-properties:not(.first) {
       border-top: 1px solid #e3e3e3; }
-    /* line 89, ../../../../general/res/sass/_inspector.scss */
+    /* line 97, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-properties .label {
       color: #999999;
       text-transform: uppercase; }
-    /* line 93, ../../../../general/res/sass/_inspector.scss */
+    /* line 101, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-properties .value {
       color: #404040;
       word-break: break-all; }
-  /* line 100, ../../../../general/res/sass/_inspector.scss */
+  /* line 108, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-location .location-item {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -1514,18 +1523,18 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     line-height: 1.2em;
     position: relative;
     padding: 2px 4px; }
-    /* line 109, ../../../../general/res/sass/_inspector.scss */
+    /* line 117, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-location .location-item .t-object-label .t-item-icon {
       height: 1.2em;
       width: 0.7rem; }
-    /* line 114, ../../../../general/res/sass/_inspector.scss */
+    /* line 122, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-location .location-item:hover {
       background: rgba(102, 102, 102, 0.1);
       color: #333333; }
-      /* line 117, ../../../../general/res/sass/_inspector.scss */
+      /* line 125, ../../../../general/res/sass/_inspector.scss */
       .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
         color: #0099cc; }
-  /* line 122, ../../../../general/res/sass/_inspector.scss */
+  /* line 130, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
     color: #8c8c8c;
     content: '\3e';
@@ -1536,15 +1545,15 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     line-height: inherit;
     margin-left: 3px;
     width: 4px; }
-  /* line 135, ../../../../general/res/sass/_inspector.scss */
+  /* line 143, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .holder-elements .current-elements {
     position: relative; }
-    /* line 138, ../../../../general/res/sass/_inspector.scss */
+    /* line 146, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .holder-elements .current-elements .tree-item .t-object-label {
       font-size: 0.75rem;
       left: 0; }
 
-/* line 149, ../../../../general/res/sass/_inspector.scss */
+/* line 157, ../../../../general/res/sass/_inspector.scss */
 .l-inspect .splitter-inspect-panel,
 .l-inspect .split-pane-component.pane.bottom {
   -moz-transition-property: opacity;
@@ -1566,10 +1575,10 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
   opacity: 0;
   pointer-events: none; }
 
-/* line 158, ../../../../general/res/sass/_inspector.scss */
+/* line 166, ../../../../general/res/sass/_inspector.scss */
 .s-status-editing .l-inspect .location-item {
   pointer-events: none; }
-/* line 159, ../../../../general/res/sass/_inspector.scss */
+/* line 167, ../../../../general/res/sass/_inspector.scss */
 .s-status-editing .l-inspect .splitter-inspect-panel,
 .s-status-editing .l-inspect .split-pane-component.pane.bottom {
   opacity: 1;
@@ -2223,18 +2232,16 @@ label.checkbox.custom,
 label.radio.custom {
   cursor: pointer;
   display: inline-block;
-  line-height: 14px;
   margin-right: 20px;
   padding-left: 19px;
-  position: relative;
-  vertical-align: middle; }
+  position: relative; }
   /* line 123, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom em,
   label.radio.custom em {
     color: #666;
     display: inline-block;
     height: 14px;
-    min-width: 14px; }
+    width: 14px; }
     /* line 128, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom em:before,
     label.radio.custom em:before {
@@ -2246,11 +2253,10 @@ label.radio.custom {
       -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       box-sizing: border-box;
-      content: " ";
+      content: "";
       font-family: 'symbolsfont';
       font-size: 0.8em;
       display: inline-block;
-      margin-right: 5px;
       height: 14px;
       width: 14px;
       left: 0;
@@ -3867,12 +3873,13 @@ mct-include.l-time-controller {
 
 /* line 33, ../../../../general/res/sass/forms/_elems.scss */
 .form {
-  color: gray; }
-  /* line 35, ../../../../general/res/sass/forms/_elems.scss */
+  color: gray;
+  width: 100%; }
+  /* line 36, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-section {
     position: relative;
     margin-bottom: 20px; }
-  /* line 40, ../../../../general/res/sass/forms/_elems.scss */
+  /* line 41, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -3883,10 +3890,10 @@ mct-include.l-time-controller {
     margin-top: 5px;
     padding: 5px 0;
     position: relative; }
-    /* line 48, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 49, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row.first {
       border-top: none; }
-    /* line 52, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 53, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row > .label,
     .form .form-row > .controls {
       -moz-box-sizing: border-box;
@@ -3897,42 +3904,43 @@ mct-include.l-time-controller {
       font-size: 0.8rem;
       line-height: 22px;
       min-height: 22px; }
-    /* line 61, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 62, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row > .label {
-      float: left;
       min-width: 120px;
+      order: 1;
       position: relative;
       white-space: nowrap;
       width: 30%; }
-    /* line 71, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 73, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .value {
       color: #666; }
-    /* line 75, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 77, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .controls {
-      float: left;
+      order: 2;
       position: relative;
-      width: 69.9%; }
-      /* line 82, ../../../../general/res/sass/forms/_elems.scss */
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto; }
+      /* line 85, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .l-composite-control.l-checkbox {
         display: inline-block;
         line-height: 14px;
         margin-right: 5px; }
-      /* line 91, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 93, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .l-med input[type="text"] {
         width: 200px; }
-      /* line 95, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 97, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .l-small input[type="text"] {
         width: 50px; }
-      /* line 99, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 101, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .l-numeric input[type="text"] {
         text-align: right; }
-      /* line 103, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 105, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .controls .select {
         margin-right: 5px; }
-    /* line 108, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 110, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .field-hints {
       color: #333333; }
-    /* line 112, ../../../../general/res/sass/forms/_elems.scss */
+    /* line 114, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .selector-list {
       -moz-appearance: none;
       -webkit-appearance: none;
@@ -3955,7 +3963,7 @@ mct-include.l-time-controller {
       /* line 327, ../../../../general/res/sass/_mixins.scss */
       .form .form-row .selector-list.error {
         background: rgba(255, 0, 0, 0.5); }
-      /* line 119, ../../../../general/res/sass/forms/_elems.scss */
+      /* line 121, ../../../../general/res/sass/forms/_elems.scss */
       .form .form-row .selector-list > .wrapper {
         overflow: auto;
         position: absolute;
@@ -3964,24 +3972,53 @@ mct-include.l-time-controller {
         bottom: 5px;
         left: 5px; }
 
-/* line 133, ../../../../general/res/sass/forms/_elems.scss */
+/* line 135, ../../../../general/res/sass/forms/_elems.scss */
+.l-controls-first .form .form-row {
+  margin-top: 3px; }
+  /* line 138, ../../../../general/res/sass/forms/_elems.scss */
+  .l-controls-first .form .form-row > .label,
+  .l-controls-first .form .form-row > .controls {
+    line-height: inherit;
+    min-height: inherit; }
+  /* line 143, ../../../../general/res/sass/forms/_elems.scss */
+  .l-controls-first .form .form-row > .label {
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+    order: 2; }
+  /* line 149, ../../../../general/res/sass/forms/_elems.scss */
+  .l-controls-first .form .form-row > .controls {
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+    margin-right: 5px;
+    order: 1; }
+
+/* line 158, ../../../../general/res/sass/forms/_elems.scss */
+.no-validate .form .form-row > .label {
+  padding-right: 0; }
+  /* line 160, ../../../../general/res/sass/forms/_elems.scss */
+  .no-validate .form .form-row > .label:after {
+    display: none; }
+
+/* line 167, ../../../../general/res/sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 139, ../../../../general/res/sass/forms/_elems.scss */
+/* line 173, ../../../../general/res/sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 144, ../../../../general/res/sass/forms/_elems.scss */
+/* line 178, ../../../../general/res/sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 151, ../../../../general/res/sass/forms/_elems.scss */
+  /* line 185, ../../../../general/res/sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -3991,7 +4028,7 @@ label.form-control.checkbox input {
     color: #ffa799;
     padding: 5px; }
 
-/* line 160, ../../../../general/res/sass/forms/_elems.scss */
+/* line 194, ../../../../general/res/sass/forms/_elems.scss */
 input[type="text"],
 input[type="search"] {
   -moz-appearance: none;
@@ -4014,12 +4051,12 @@ input[type="search"] {
   input[type="text"].error,
   input[type="search"].error {
     background: rgba(255, 0, 0, 0.5); }
-  /* line 163, ../../../../general/res/sass/forms/_elems.scss */
+  /* line 197, ../../../../general/res/sass/forms/_elems.scss */
   input[type="text"].numeric,
   input[type="search"].numeric {
     text-align: right; }
 
-/* line 168, ../../../../general/res/sass/forms/_elems.scss */
+/* line 202, ../../../../general/res/sass/forms/_elems.scss */
 textarea {
   -moz-appearance: none;
   -webkit-appearance: none;
diff --git a/platform/features/layout/res/templates/plot-options-browse.html b/platform/features/layout/res/templates/plot-options-browse.html
index a9c952eb8f..1ab2799a83 100644
--- a/platform/features/layout/res/templates/plot-options-browse.html
+++ b/platform/features/layout/res/templates/plot-options-browse.html
@@ -1,28 +1,26 @@
-<!--<style>
-    .l-inspect .inspector-plot-options .plot-options-form .label {
-        text-transform: none;
-    }
-    .l-inspect .inspector-plot-options .plot-options-form .form .controls {
-        width: 50%;
-    }
-    .l-inspect .inspector-plot-options .plot-options-form .form .label {
-        width: 50%;
-        min-width: 50px;
-        color: #bfbfbf;
-    }
-    .l-inspect .inspector-plot-options .plot-options-form {
-        padding-left: 20px;
-    }
-    .l-inspect .inspector-plot-options .plot-options-form .form-row {
-        border-top: none;
-    }
-    .l-inspect .inspector-plot-options .plot-options-form .form .form-row.first {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-</style>-->
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
 
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <div ng-controller="PlotOptionsController" class="flex-elem grows l-inspector-part">
-    <em title="Display properties for this object">Display</em>
+    <em class="t-inspector-part-header" title="Display properties for this object">Display</em>
     <ul class="first flex-elem grows vscroll">
         <ul class="tree">
             <li ng-repeat="child in children">
@@ -41,15 +39,13 @@
                             </mct-representation>
                         </span>
                     </span>
-                    <div class="plot-options-form no-validate l-controls-first">
-                        <mct-form
-                                ng-class="{hidden: !toggle.isActive()}"
-                                ng-model="plotOptionsModel"
-                                structure="plotOptionsStructure"
-                                name="plotOptionsState"
-                                class="flex-elem l-flex-row">
-                        </mct-form>
-                    </div>
+                    <mct-form
+                        ng-class="{hidden: !toggle.isActive()}"
+                        ng-model="plotOptionsModel"
+                        structure="plotOptionsStructure"
+                        name="plotOptionsState"
+                        class="flex-elem l-flex-row l-controls-first no-validate">
+                    </mct-form>
                 </span>
             </li>
         </ul>
diff --git a/platform/forms/res/templates/form.html b/platform/forms/res/templates/form.html
index b4181384fd..809a43fb0e 100644
--- a/platform/forms/res/templates/form.html
+++ b/platform/forms/res/templates/form.html
@@ -19,16 +19,14 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<form name="mctForm" novalidate>
-
-<div class="form">
+<form name="mctForm" novalidate class="form">
     <span ng-repeat="section in structure.sections">
         <div class="section-header" ng-if="section.name">
             {{section.name}}
         </div>
         <div class="form-section">
             <ng-form name="mctFormInner" ng-repeat="row in section.rows">
-                <div class="form-row validates"
+                <div class="form-row validates l-flex-row"
                      ng-class="{
                                req: row.required,
                                valid: mctFormInner.$dirty && mctFormInner.$valid,
@@ -36,14 +34,14 @@
                                first: $index < 1
                                }">
 
-                    <div class='label' title="{{row.description}}">
+                    <div class='label flex-elem' title="{{row.description}}">
                         {{row.name}}
                         <span ng-if="row.description"
                               class="ui-symbol">
                             i
                         </span>
                     </div>
-                    <div class='controls'>
+                    <div class='controls flex-elem'>
                         <div class="wrapper" ng-if="row.control">
                             <mct-control key="row.control"
                                          ng-model="ngModel"
@@ -59,6 +57,4 @@
             </ng-form>
         </div>
     </span>
-</div>
-
 </form>
\ No newline at end of file