From 98f4a2f6f34c8eb670f064a1411f14a6fb961940 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+sivin-git@users.noreply.github.com>
Date: Thu, 8 Apr 2021 19:42:38 +0530
Subject: [PATCH] Fix: Dropdown width issue fixes by using fit-content (#2048)

* Dropdown width issue fixes by using fit-content

* Review fixes

* Review fixes

* Review fixes

* Review fixes

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
---
 .../dashboard/assets/scss/plugins/_dropdown.scss           | 1 +
 .../dashboard/assets/scss/widgets/_sidemenu.scss           | 7 +++++--
 .../dashboard/components/layout/AvailabilityStatus.vue     | 1 +
 .../components/layout/sidebarComponents/OptionsMenu.vue    | 5 +++++
 .../components/widgets/conversation/MoreActions.vue        | 1 -
 5 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
index 9f70dec13..8ca486221 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
@@ -1,6 +1,7 @@
 .dropdown-pane {
   @include elegant-card;
   @include border-light;
+  width: fit-content;
   z-index: 999;
 
   &.dropdown-pane--open {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index 099d32287..aafff16ff 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
@@ -67,12 +67,15 @@
   flex-direction: column;
   position: relative;
 
+  &:hover {
+    background: var(--color-background-light);
+  }
+
   .dropdown-pane {
     bottom: 6rem;
     display: block;
-    left: 5rem;
     visibility: visible;
-    width: 80%;
+    width: fit-content;
   }
 
   .active {
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index 469129339..0be471a46 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -170,6 +170,7 @@ export default {
 .status-change {
   .dropdown-pane {
     top: -132px;
+    right: var(--space-normal);
   }
 
   .status-items {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index a2902d071..292e4df4e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -80,3 +80,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.dropdown-pane {
+  right: 0;
+}
+</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 883b27a2c..2c73969e5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -112,7 +112,6 @@ export default {
 .dropdown-pane {
   right: var(--space-minus-small);
   top: 48px;
-  width: auto;
 }
 
 .icon {