chore: Show scrollbar for sidebar only on hover (#3688)

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -191,16 +191,6 @@ export default {
   background: var(--white);
   display: flex;
 }
-
-.secondary-menu {
-  background: var(--white);
-  border-right: 1px solid var(--s-50);
-  height: 100vh;
-  width: 19rem;
-  flex-shrink: 0;
-  overflow: auto;
-  padding: var(--space-small);
-}
 </style>
 
 <style lang="scss">

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

@@ -168,3 +168,18 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.secondary-menu {
+  background: var(--white);
+  border-right: 1px solid var(--s-50);
+  height: 100vh;
+  width: 19rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: var(--space-small);
+
+  &:hover {
+    overflow: auto;
+  }
+}
+</style>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -10,17 +10,24 @@
       />
 
       <div class="contact--details">
-        <h3 v-if="showAvatar" class="sub-block-title contact--name">
+        <div v-if="showAvatar" class="contact--name-wrap">
+          <h3 class="sub-block-title contact--name">
+            {{ contact.name }}
+          </h3>
           <a
             :href="contactProfileLink"
             class="fs-default"
             target="_blank"
             rel="noopener nofollow noreferrer"
           >
-            {{ contact.name }}
+            <woot-button
-            <fluent-icon size="16" icon="open" class="open-link--icon" />
+              size="tiny"
+              icon="open"
+              variant="clear"
+              color-scheme="secondary"
+            />
           </a>
-        </h3>
+        </div>
         <p v-if="additionalAttributes.description" class="contact--bio">
           {{ additionalAttributes.description }}
         </p>
@@ -294,19 +301,20 @@ export default {
   text-align: left;
 }
 
+.contact--name-wrap {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--space-small);
+}
+
 .contact--name {
   text-transform: capitalize;
   white-space: normal;
+  margin: 0 var(--space-smaller) 0 0;
 
   a {
     color: var(--color-body);
   }
-
-  .open-link--icon {
-    color: var(--color-body);
-    font-size: var(--font-size-small);
-    margin-left: var(--space-smaller);
-  }
 }
 
 .contact--metadata {