[Frontend] Significant mods to fluid-layouts

- Restructure code to make better use of mixins;
- Added .fl-mobile-only selector;
- Simplified layout logic for column/row/wrap styles;

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -175,56 +175,75 @@ body.desktop .frame {
     }
 }
 
-.holder-object:not(.s-status-editing) {
-    .l-layout {
-        &.fl-column,
-        &.fl-row,
-        &.fl-wrap,
-        &.fl-phone-best-fit,
-        &.fl-mobile-best-fit {
-            display: flex;
-            flex-wrap: nowrap;
-            align-content: stretch;
-            align-items: stretch;
-            > .frame {
-                display: block;
-                flex: 1 1 auto;
-                width: auto !important;
-                height: auto !important;
-                &.t-object-type-summary-widget {
-                    &.no-frame.t-frame-outer > .t-rep-frame {
-                        &.contents {
-                            // When frame is hidden, add a bit of margin to the contents
-                            $m: $interiorMargin;
-                            top: $m; right: $m; bottom: $m; left: $m;
-                        }
+
+/**************************************************************** FLUID LAYOUTS */
+/*
+fl-column: obey min-height, but use min-width: auto;
+fl-row: obey min-width, but use min-height: auto;
+fl-wrap: uses both min-width and min-height;
+fl-mobile-best-fit: fl-column or fl-row depending on orientation
+ */
+
+
+@mixin flStyles() {
+    &.fl-column,
+    &.fl-row,
+    &.fl-mobile-best-fit {
+        display: flex;
+        flex-wrap: nowrap;
+        align-content: stretch;
+        align-items: stretch;
+        > .frame {
+            display: block;
+            flex: 1 1 auto;
+            width: auto !important;
+            height: auto !important;
+            top: auto !important;
+            left: auto !important;
+            position: relative;
+            &.t-object-type-summary-widget {
+                &.no-frame.t-frame-outer > .t-rep-frame {
+                    &.contents {
+                        // When frame is hidden, add a bit of margin to the contents
+                        $m: $interiorMargin;
+                        top: $m; right: $m; bottom: $m; left: $m;
                     }
                 }
             }
         }
-        &.fl-column {
-            flex-direction: column;
-            padding-right: $interiorMargin;
-        }
-        &.fl-row {
-            flex-direction: row;
-            padding-bottom: $interiorMargin;
-        }
+    }
 
-        &.fl-wrap {
-            align-content: flex-start;
-            align-items: flex-start;
-            flex-wrap: wrap;
-        }
+    &.fl-wrap {
+        flex-wrap: wrap;
+    }
+}
+
+@mixin flColumn() {
+    flex-direction: column !important;
+    &:not(.fl-wrap) > .frame { min-width: auto !important; }
+    padding-right: $interiorMargin;
+}
+
+@mixin flRow() {
+    flex-direction: row !important;
+    &:not(.fl-wrap) > .frame { min-height: auto !important; }
+    padding-bottom: $interiorMargin;
+}
+
+.holder-object:not(.s-status-editing) {
+    // Browsing only
+    .l-layout:not(.fl-mobile-only) {
+        @include flStyles();
+        &.fl-column { @include flColumn(); }
+        &.fl-row { @include flRow(); }
     }
 }
 
 .holder-object {
-    .l-layout {
+    // Editing AND browsing
+    .l-layout:not(.fl-mobile-only) {
         &.fl-column,
         &.fl-row,
-        &.fl-wrap,
-        &.fl-phone-best-fit,
         &.fl-mobile-best-fit {
             > .frame {
                 top: auto !important;
@@ -236,14 +255,20 @@ body.desktop .frame {
 }
 
 body.mobile {
+    .l-layout.fl-mobile-only {
+        @include flStyles();
+    }
     .l-layout.fl-mobile-best-fit {
-        flex-wrap: wrap !important;
         padding: 0 !important;
     }
-    &.portrait .l-layout.fl-mobile-best-fit {
-        flex-direction: column !important;
+    &.landscape .l-layout {
+        &.fl-mobile-best-fit {
+            @include flRow();
+        }
     }
-    &.landscape .l-layout.fl-mobile-best-fit {
-        flex-direction: row !important;
+    &.portrait .l-layout {
+        &.fl-mobile-best-fit {
+            @include flColumn();
+        }
     }
 }