[Mobile] IN PROGRESS: Menu hide/show fixes; font-size tweaking

open #74
Changed .right-repr to use translateX in phone portrait mode;
font-size tweaking;
Refactored css organization in mobile/_layout.scss;

platform/commonUI/browse/res/templates/browse.html

@@ -38,13 +38,14 @@
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
-                    <div class='split-pane-component items pane mobile-pane right-repr'>
+
-                        <div class='holder abs l-mobile' id='content-area'>
+            <div class='split-pane-component items pane mobile-pane right-repr'>
-                            <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                <div class='holder abs l-mobile' id='content-area'>
-                            </mct-representation>
+                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                        </div>
+                    </mct-representation>
-                    <div class="left key-properties ui-symbol icon mobile-menu-icon" ng-click="treeSlide()">m</div>
+                </div>
-                    </div>
+                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
+            </div>
         </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>

platform/commonUI/general/res/css/theme-espresso.css

@@ -870,7 +870,7 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    right: 19px !important; } }
+    right: 10% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
@@ -896,7 +896,8 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    width: 19px !important; } }
+    left: 0 !important;
+    transform: translateX(90%); } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
@@ -910,38 +911,39 @@ mct-container {
   .browse-showtree .mobile-pane.right-repr {
     width: 70% !important; } }
 
-/* line 168, ../sass/mobile/_layout.scss */
-.mobile-menu-icon {
-  position: absolute;
-  top: 10px;
-  left: 10px; }
-
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 176, ../sass/mobile/_layout.scss */
+  /* line 171, ../sass/mobile/_layout.scss */
-  .object-header {
+  .mobile-menu-icon {
-    position: relative;
+    font-size: 110%;
-    left: 44px; }
+    position: absolute;
-    /* line 181, ../sass/mobile/_layout.scss */
+    top: 12px;
-    .object-header .label .context-available {
+    left: 10px; }
-      opacity: 1 !important; } }
+
+  /* line 178, ../sass/mobile/_layout.scss */
+  .object-browse-bar {
+    display: block !important;
+    left: 35px !important; }
+    /* line 183, ../sass/mobile/_layout.scss */
+    .object-browse-bar .context-available {
+      opacity: 1 !important; }
 
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 188, ../sass/mobile/_layout.scss */
-  .desktop-hide {
+  .tree-holder {
-    display: none; } }
+    overflow-x: hidden !important; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 192, ../sass/mobile/_layout.scss */
-  /* line 195, ../sass/mobile/_layout.scss */
+  .mobile-disable-select {
-  .mobile-hide {
+    -moz-user-select: -moz-none;
-    display: none; } }
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 197, ../sass/mobile/_layout.scss */
-  /* line 201, ../sass/mobile/_layout.scss */
+  .mobile-hide,
-  .mobile-important-hide {
+  .mobile-hide-important {
-    display: none !important; } }
+    display: none !important; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 202, ../sass/mobile/_layout.scss */
-  /* line 207, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -956,10 +958,9 @@ mct-container {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    opacity: 0; } }
+    opacity: 0; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 207, ../sass/mobile/_layout.scss */
-  /* line 216, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -975,25 +976,54 @@ mct-container {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 1; } }
-
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 214, ../sass/mobile/_layout.scss */
-  /* line 225, ../sass/mobile/_layout.scss */
+  .desktop-hide {
-  .phone-hide {
     display: none; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+/*
-  /* line 231, ../sass/mobile/_layout.scss */
-  .tree-holder {
-    overflow-x: hidden !important; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+.mobile-back-hide {
-  /* line 236, ../sass/mobile/_layout.scss */
+    @include phoneandtablet {
-  .mobile-disable-select {
+        pointer-events: none;
-    -moz-user-select: -moz-none;
+        @include trans-prop-nice(opacity, .4s);
-    -ms-user-select: none;
+        opacity: 0;
-    -webkit-user-select: none;
+    }
-    user-select: none; } }
+}
 
+
+// Hides objects on phone and tablet
+.mobile-back-unhide {
+    @include phoneandtablet {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
+    }
+}
+
+
+// Hides objects only on the phone
+.phone-hide {
+    @include phone {
+        display: none;
+    }
+}
+
+.tree-holder {
+    @include phoneandtablet {
+        .tree-holder {
+            overflow-x: hidden !important;
+        }
+    }
+}
+.mobile-disable-select {
+    @include phoneandtablet {
+        .mobile-disable-select {
+            @include user-select(none);
+        }
+    }
+}
+*/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -3047,39 +3077,6 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 25, ../sass/mobile/controls/_menus.scss */
-.mobile-menu-icon {
-  display: inline-block; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 25, ../sass/mobile/controls/_menus.scss */
-    .mobile-menu-icon {
-      font-size: 21px; } }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 25, ../sass/mobile/controls/_menus.scss */
-    .mobile-menu-icon {
-      display: none; } }
-
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
@@ -4706,13 +4703,16 @@ input[type="text"] {
   left: 0px;
   width: auto;
   height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 28, ../sass/user-environ/_object-browse.scss */
+  /* line 29, ../sass/user-environ/_object-browse.scss */
   .object-browse-bar .left {
     padding-right: 5px; }
-    /* line 30, ../sass/user-environ/_object-browse.scss */
+    /* line 31, ../sass/user-environ/_object-browse.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;

platform/commonUI/general/res/css/tree.css

@@ -324,28 +324,28 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 30, ../sass/mobile/_tree.scss */
+  /* line 28, ../sass/mobile/_tree.scss */
   ul.tree li span.tree-item {
     height: 35px;
     line-height: 35px;
     margin-bottom: 0px; }
-    /* line 35, ../sass/mobile/_tree.scss */
+    /* line 33, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .view-control {
       position: absolute;
       font-size: 1.1em;
       right: 0px;
       width: 30px;
       text-align: center; }
-    /* line 44, ../sass/mobile/_tree.scss */
+    /* line 42, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .label {
       left: 0;
       right: 35px;
-      font-size: 1.2em; }
+      font-size: 1.1em; }
-      /* line 51, ../sass/mobile/_tree.scss */
+      /* line 50, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .type-icon {
         top: 9px;
         bottom: auto;
         height: 16px; }
-  /* line 62, ../sass/mobile/_tree.scss */
+  /* line 61, ../sass/mobile/_tree.scss */
   ul.tree ul.tree {
     margin-left: 20px; } }

platform/commonUI/general/res/sass/_main.scss

@@ -48,7 +48,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-@import "mobile/controls/menus";
+//@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";

platform/commonUI/general/res/sass/_mixins.scss

@@ -368,6 +368,7 @@
 }
 
 @mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+    @inlude box-sizing(border-box);
     border: 1px dotted rgba($c, $a);
 }
 

platform/commonUI/general/res/sass/mobile/_constants.scss

@@ -81,7 +81,7 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 19px;
+$phoneRepSizePortrait: 10%;
 $phoneRepSizeLandscape: 60%;
 $tabletRepSizePortrait: 500px;
 $tabletRepSizeLandscape: 70%;

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -149,7 +149,9 @@
         // On both phones and tablets, the width of
         // the right pane is specified
         @include phonePortrait {
-            width: $phoneRepSizePortrait !important;
+            //width: $phoneRepSizePortrait !important;
+            left: 0 !important;
+            transform: translateX(100% - $phoneRepSizePortrait);
         }
         @include phoneLandscape {
             width: $phoneRepSizeLandscape !important;
@@ -165,24 +167,48 @@
     }
 }
 
-.mobile-menu-icon {
+@include phoneandtablet {
-    position: absolute;
+    .mobile-menu-icon {
-    top: $bodyMargin; left: $bodyMargin;
+        font-size: 110%;
-}
+        position: absolute;
+        top: $bodyMargin + 2;
+        left: $bodyMargin;
+    }
 
-// Object header must be moved
+    .object-browse-bar {
-// over to make space for the 
+        //@include test();
-// hamburger icon
+        display: block !important;
-.object-header {
+        //font-size: 0.95em;
-    @include phoneandtablet {
+        left: 35px !important;
-        position: relative;
+        .context-available {
-        left: 44px;        
+            opacity: 1 !important;
-        .label {
-            .context-available {
-                opacity: 1 !important;
-            }
         }
     }
+
+    .tree-holder {
+        overflow-x: hidden !important;
+    }
+
+    .mobile-disable-select {
+        @include user-select(none);
+    }
+
+    // Hides objects on phone and tablet
+    .mobile-hide,
+    .mobile-hide-important {
+        display: none !important;
+    }
+
+    .mobile-back-hide {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+    .mobile-back-unhide {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
+    }
 }
 
 .desktop-hide {
@@ -191,18 +217,7 @@
     }
 }
 
-// Hides objects on phone and tablet
+/*
-.mobile-hide {
-    @include phoneandtablet {
-        display: none;
-    }
-}
-
-.mobile-important-hide {
-    @include phoneandtablet {
-        display: none !important;
-    }
-}
 
 .mobile-back-hide {
     @include phoneandtablet {
@@ -212,6 +227,7 @@
     }
 }
 
+
 // Hides objects on phone and tablet
 .mobile-back-unhide {
     @include phoneandtablet {
@@ -221,6 +237,7 @@
     }
 }
 
+
 // Hides objects only on the phone
 .phone-hide {
     @include phone {
@@ -230,11 +247,16 @@
 
 .tree-holder {
     @include phoneandtablet {
-        overflow-x: hidden !important;
+        .tree-holder {
+            overflow-x: hidden !important;
+        }
     }
 }
 .mobile-disable-select {
     @include phoneandtablet {
-        @include user-select(none);
+        .mobile-disable-select {
+            @include user-select(none);
+        }
     }
 }
+*/

platform/commonUI/general/res/sass/mobile/_tree.scss

@@ -20,10 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-
+@include phoneandtablet {
-ul.tree {
+    ul.tree {
-    // Only applies to phones and tablets
-    @include phoneandtablet {
         //@include menuUlReset();
         li {
             //border-top: 1px solid $colorInteriorBorder; // TEMP
@@ -47,7 +45,8 @@ ul.tree {
                     // Also adds right space for selection button
                     left: 0;
                     right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-                    font-size: 1.2em;
+                    font-size: 1.1em;
+                    //font-size: 1.2em; // CH CO
                     .type-icon {
                         @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
                     }

platform/commonUI/general/res/sass/user-environ/_object-browse.scss

@@ -21,6 +21,7 @@
  *****************************************************************************/
 .object-browse-bar {
     @include absPosDefault();
+    @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
     white-space: nowrap;