fix: fast scrolling in canned responses list on mouse hover (#11933)

# Pull Request Template

## Description

This PR fixes a fast scrolling issue in the canned responses list that
occurred when hovering near the top or bottom edge.

Fixes https://github.com/chatwoot/chatwoot/issues/11923,
[CW-4624](https://linear.app/chatwoot/issue/CW-4624/canned-responses-menu-scrolls-too-fast-when-mouse-near-top-or-bottom)

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screencast

**Before**


https://github.com/user-attachments/assets/1c39ad33-c5c9-49ce-a252-542428b7f7e3

**After**


https://github.com/user-attachments/assets/19c73713-0ffe-461a-9c3d-486e53e21abf




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
 
 const props = defineProps({
@@ -19,19 +19,16 @@ const mentionsListContainerRef = ref(null);
 const selectedIndex = ref(0);
 
 const adjustScroll = () => {
+  nextTick(() => {
     const container = mentionsListContainerRef.value;
-  const item = container.querySelector(`#mention-item-${selectedIndex.value}`);
-  if (item) {
-    const itemTop = item.offsetTop;
-    const itemBottom = itemTop + item.offsetHeight;
-    const containerTop = container.scrollTop;
-    const containerBottom = containerTop + container.offsetHeight;
-    if (itemTop < containerTop) {
-      container.scrollTop = itemTop;
-    } else if (itemBottom + 34 > containerBottom) {
-      container.scrollTop = itemBottom - container.offsetHeight + 34;
-    }
+    if (!container) return;
+    const selectedElement = container.querySelector(
+      `#mention-item-${selectedIndex.value}`
+    );
+    if (selectedElement) {
+      selectedElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });
     }
+  });
 };
 
 const onSelect = () => {