chore: Update styles for canned response (#6262)

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -374,6 +374,8 @@ export default {
 
   .ProseMirror-menubar {
     min-height: var(--space-two) !important;
+    margin-left: var(--space-minus-one);
+    padding-bottom: 0;
   }
 
   > .ProseMirror {

app/javascript/dashboard/components/widgets/conversation/TagAgents.vue

@@ -96,7 +96,9 @@ export default {
 <style scoped lang="scss">
 .mention--box {
   background: var(--white);
+  border-radius: var(--border-radius-normal);
   border-top: 1px solid var(--color-border);
+  box-shadow: var(--shadow-medium);
   font-size: var(--font-size-small);
   left: 0;
   line-height: 1.2;

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -1,23 +1,22 @@
 <template>
-  <div v-if="items.length" ref="mentionsListContainer" class="mention--box">
+  <ul
-    <ul class="vertical dropdown menu">
+    v-if="items.length"
-      <woot-dropdown-item
+    class="vertical dropdown menu mention--box"
-        v-for="(item, index) in items"
+    :style="{ top: getTopPadding() + 'rem' }"
-        :id="`mention-item-${index}`"
+  >
-        :key="item.key"
+    <li
-        @mouseover="onHover(index)"
+      v-for="(item, index) in items"
-      >
+      :id="`mention-item-${index}`"
-        <woot-button
+      :key="item.key"
-          size="small"
+      :class="{ active: index === selectedIndex }"
-          class="text-truncate"
+      @click="onListItemSelection(index)"
-          :variant="index === selectedIndex ? 'smooth' : 'clear'"
+      @mouseover="onHover(index)"
-          @click="onListItemSelection(index)"
+    >
-        >
+      <a class="text-truncate">
-          <strong>{{ item.label }}</strong> - {{ item.description }}
+        <strong>{{ item.label }}</strong> - {{ item.description }}
-        </woot-button>
+      </a>
-      </woot-dropdown-item>
+    </li>
-    </ul>
+  </ul>
-  </div>
 </template>
 
 <script>
@@ -70,22 +69,18 @@ export default {
 <style scoped lang="scss">
 .mention--box {
   background: var(--white);
-  box-shadow: var(--shadow-medium);
+  border-bottom: var(--space-small) solid var(--white);
   border-radius: var(--border-radius-normal);
   border-top: 1px solid var(--color-border);
+  box-shadow: var(--shadow-medium);
   left: 0;
-  bottom: 100%;
+  max-height: 14rem;
-  max-height: 18rem;
   overflow: auto;
-  padding: var(--space-small) var(--space-small) 0;
+  padding-top: var(--space-small);
   position: absolute;
   width: 100%;
   z-index: 100;
 
-  .dropdown-menu__item:last-child {
-    padding-bottom: var(--space-smaller);
-  }
-
   .active a {
     background: var(--w-500);
   }