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>
chatwoot · Apr 8, 2021 · 98f4a2f · 98f4a2f
1 parent 28fb646
commit 98f4a2f
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -112,7 +112,6 @@ export default {
 .dropdown-pane {
   right: var(--space-minus-small);
   top: 48px;
-  width: auto;
 }
 
 .icon {