fix: Avoid overflowing submenus in conversation context menu (#5113)

* Scroll overflowing content inside submenus

* Disable submenus if options are not available

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="menu-with-submenu flex-between">
+  <div
+    class="menu-with-submenu flex-between"
+    :class="{ disabled: !subMenuAvailable }"
+  >
     <div class="menu-left">
       <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
       <p class="menu-label">{{ option.label }}</p>
     </div>
     <fluent-icon icon="chevron-right" size="12" />
-    <div class="submenu">
+    <div v-if="subMenuAvailable" class="submenu">
       <slot />
     </div>
   </div>
@@ -18,6 +21,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    subMenuAvailable: {
+      type: Boolean,
+      default: true,
+    },
   },
 };
 </script>
@@ -55,6 +62,11 @@ export default {
     left: 100%;
     top: 0;
     display: none;
+    min-height: min-content;
+    max-height: var(--space-giga);
+    overflow-y: auto;
+    // Need this because Firefox adds a horizontal scrollbar, if a text is truncated inside.
+    overflow-x: hidden;
   }
 
   &:hover {
@@ -73,5 +85,10 @@ export default {
       clip-path: polygon(100% 0, 0% 0%, 100% 100%);
     }
   }
+
+  &.disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
 }
 </style>