From fade94658add91453580825a2ca9b14b3e93c9f0 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 5 Jan 2022 09:37:43 +0530
Subject: [PATCH] chore: Show scrollbar for sidebar only on hover (#3688)

---
 .../dashboard/components/layout/Sidebar.vue   | 10 -------
 .../layout/sidebarComponents/Secondary.vue    | 15 ++++++++++
 .../conversation/contact/ContactInfo.vue      | 28 ++++++++++++-------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 06ec9201c..2a8cca7c4 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/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">
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index bed093042..328bda1b5 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 037cf1e73..d2cf8974a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/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 }}
-            <fluent-icon size="16" icon="open" class="open-link--icon" />
+            <woot-button
+              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 {