chore: Sidebar improvements in small screens (#5400)

* chore: Sidebar improvements in small screens

* chore: Minor fixes

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -13,8 +13,9 @@
       <div v-if="showSwitchButton" class="account-context--switch-group">
         <woot-button
           variant="clear"
+          size="tiny"
           icon="arrow-swap"
-          class="cursor-pointer"
+          class="switch-button"
           @click="$emit('toggle-accounts')"
         >
           {{ $t('SIDEBAR.SWITCH') }}
@@ -54,8 +55,7 @@ export default {
   border: 1px solid var(--color-border);
   font-size: var(--font-size-mini);
   padding: var(--space-small);
-  margin-bottom: var(--space-small);
-  width: 100%;
+  margin: var(--space-small) var(--space-small) 0 var(--space-small);
   position: relative;
 
   &:hover {
@@ -68,6 +68,10 @@ export default {
   }
 }
 
+.switch-button {
+  margin-right: var(--space-small);
+}
+
 .account-context--switch-group {
   --overlay-shadow: linear-gradient(
     to right,

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -242,17 +242,32 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '~dashboard/assets/scss/woot';
+
 .secondary-menu {
   background: var(--white);
   border-right: 1px solid var(--s-50);
   height: 100%;
-  width: 19rem;
+  width: 20rem;
   flex-shrink: 0;
-  overflow: hidden;
-  padding: var(--space-small);
+  overflow-y: hidden;
+
+  @include breakpoint(xlarge down) {
+    position: absolute;
+  }
+
+  @include breakpoint(xlarge up) {
+    position: unset;
+  }
 
   &:hover {
-    overflow: auto;
+    overflow-y: hidden;
+  }
+
+  .menu {
+    padding: var(--space-small);
+    overflow-y: auto;
+    height: 94%;
   }
 }
 </style>