RED-1715: Dev mode hint improvements

apps/red-ui/src/app/components/base-screen/base-screen.component.html

@@ -83,7 +83,7 @@
                 </a>
             </ng-container>
         </div>
-        <div class="center flex-1">
+        <div class="center logo-wrapper">
             <redaction-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
                 <redaction-logo></redaction-logo>
             </redaction-hidden-action>

apps/red-ui/src/app/components/base-screen/base-screen.component.scss

@@ -1,16 +1,23 @@
 @import '../../../assets/styles/red-variables';
 @import '../../../assets/styles/red-mixins';
 
-.dev-mode {
-    margin: 0 10px;
-    padding: 2px 5px;
-    background-color: $primary;
-    color: $white;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 16px;
-    height: 16px;
-    text-align: center;
+.logo-wrapper {
+    position: relative;
+    margin: 0 20px;
+
+    .dev-mode {
+        margin: 0 10px;
+        padding: 2px 5px;
+        background-color: $primary;
+        color: $white;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 13px;
+        text-align: center;
+        position: absolute;
+        left: 100%;
+        white-space: nowrap;
+    }
 }
 
 .menu-placeholder {

apps/red-ui/src/assets/styles/red-page-layout.scss

@@ -311,6 +311,7 @@ section.settings {
             font-weight: 800;
             letter-spacing: 0;
             line-height: 20px;
+            white-space: nowrap;
         }
 
         .menu {