2 files changed, 29 insertions, 9 deletions
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue
index b890331b..22be55c7 100644
--- a/src/components/_sila/AppHeader/AppHeader.vue
+++ b/src/components/_sila/AppHeader/AppHeader.vue
@@ -43,13 +43,13 @@
           </b-navbar-brand>
           <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
             <span>|</span>
-            <span class="pl-3">{{ assetTag }}</span>
-            <span class="pl-3">{{ modelType }}</span>
-            <span class="pl-3">{{ serialNumber }}</span>
+            <span class="pl-2">{{ assetTag }}</span>
+            <span class="pl-2">{{ modelType }}</span>
+            <span class="pl-2">{{ serialNumber }}</span>
           </div>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
+        <b-navbar-nav class="ml-auto helper-menu">
           <b-nav-item
             to="/logs/event-logs"
             data-test-id="appHeader-container-health"
@@ -258,6 +258,9 @@ export default {
     color: color('white') !important;
     fill: currentColor;
     padding: 0.68rem 1rem !important;
+    @include media-breakpoint-down(md) {
+      padding: 0.68rem 0.5rem !important;
+    }
 
     &:hover {
       background-color: theme-color-level(light, 10);
@@ -281,6 +284,23 @@ export default {
     @include media-breakpoint-up($responsive-layout-bp) {
       height: $header-height;
     }
+
+    .helper-menu {
+      @include media-breakpoint-down(sm) {
+        width: 100%;
+        justify-content: flex-end;
+      }
+
+      .nav-link,
+      .btn {
+        padding: $spacer / 1.125 $spacer / 2;
+      }
+      .responsive-text {
+        @include media-breakpoint-down(xs) {
+          @include sr-only;
+        }
+      }
+    }
   }
 
   .navbar-nav {
diff --git a/src/components/_sila/Global/ButtonBackToTop.vue b/src/components/_sila/Global/ButtonBackToTop.vue
index 9160c7b7..6d891e56 100644
--- a/src/components/_sila/Global/ButtonBackToTop.vue
+++ b/src/components/_sila/Global/ButtonBackToTop.vue
@@ -47,8 +47,8 @@ export default {
 <style lang="scss" scoped>
 .btn-top {
   position: fixed;
-  bottom: 24px;
-  right: 24px;
+  bottom: $spacer;
+  right: $spacer * 2;
 
   box-shadow: $box-shadow;
   visibility: hidden;
@@ -56,9 +56,9 @@ export default {
   transition: $transition-base;
   z-index: $zindex-fixed;
 
-  @media (min-width: 1600px) {
-    left: 1485px;
-    right: auto;
+  @include media-breakpoint-up($responsive-layout-bp) {
+    left: auto;
+    right: $spacer * 2;
   }
 }
 .show-btn {