Fix Inspector-based font size and style controls and menus (#3497)

- Moved CSS rule that was pushing the font style control to the right
side of the Inspector to `l-shell__toolbar` rule definition;
- Fixed `menus-to-left` CSS rule and applied to font size and style
menu controls;
- Added a new `menus-no-icon` style for menus that don't have icons,
applied to font size and style menu controls;

src/styles/_controls.scss

@@ -482,7 +482,7 @@ select {
         transition: $transIn;
         white-space: nowrap;
 
-        &:hover {
+        @include hover {
             background: $colorMenuHovBg;
             color: $colorMenuHovFg;
             &:before {
@@ -500,6 +500,10 @@ select {
         &:not([class*='icon']):before {
              content: ''; // Enable :before so that menu items without an icon still indent properly
         }
+
+        .menus-no-icon & {
+            &:before { display: none; }
+        }
     }
 }
 
@@ -731,7 +735,6 @@ select {
 .c-toolbar {
     display: flex;
     align-items: center;
-    justify-content: space-between;
 
     > * {
         // First level items

src/styles/_mixins.scss

@@ -552,7 +552,8 @@
         }
     }
 
-    &[class*='--menus-left'] {
+    &[class*='--menus-left'],
+    &[class*='menus-to-left'] {
         .c-menu {
             left: auto; right: 0;
         }

src/ui/inspector/styles/FontStyleEditor.vue

@@ -3,11 +3,13 @@
     <toolbar-select-menu
         :options="fontSizeMenuOptions"
         @change="setFontSize"
+        class="menus-to-left menus-no-icon"
     />
     <div class="c-toolbar__separator"></div>
     <toolbar-select-menu
         :options="fontMenuOptions"
         @change="setFont"
+        class="menus-to-left menus-no-icon"
     />
 </div>
 </template>

src/ui/layout/layout.scss

@@ -279,10 +279,12 @@
     }
 
     &__toolbar {
+        // Toolbar in the main shell, used by Display Layouts
         $p: $interiorMargin;
         background: $editUIBaseColor;
         border-radius: $basicCr;
         height: $p + 24px; // Need to standardize the height
+        justify-content: space-between;
         padding: $p;
     }
 }