chore: Update feedback fixes

app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue

@@ -6,6 +6,10 @@ import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
 import AddLabel from 'dashboard/components-next/label/AddLabel.vue';
 
 const props = defineProps({
+  wrapperRef: {
+    type: Object,
+    default: null,
+  },
   contactId: {
     type: [String, Number],
     default: null,
@@ -117,10 +121,7 @@ const handleLabelHover = labelId => {
 </script>
 
 <template>
-  <div
-    class="flex flex-wrap items-center gap-2 ltr:mr-10 rtl:ml-10"
-    @mouseleave="handleMouseLeave"
-  >
+  <div class="flex flex-wrap items-center gap-2" @mouseleave="handleMouseLeave">
     <LabelItem
       v-for="label in savedLabels"
       :key="label.id"
@@ -132,6 +133,7 @@ const handleLabelHover = labelId => {
     />
     <AddLabel
       :label-menu-items="labelMenuItems"
+      :wrapper-ref="wrapperRef"
       @update-label="handleLabelAction"
     />
   </div>

app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue

@@ -126,7 +126,7 @@ const closeMobileSidebar = () => {
     <!-- Desktop sidebar -->
     <div
       v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-5 max-w-md border-l border-n-weak bg-n-surface-2"
+      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-5 max-w-md ltr:border-l rtl:border-r border-n-weak bg-n-surface-2"
     >
       <slot name="sidebar" />
     </div>

app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue

@@ -25,6 +25,8 @@ const emit = defineEmits(['goToContactsList']);
 const { t } = useI18n();
 const store = useStore();
 
+const wrapperRef = ref(null);
+
 const confirmDeleteContactDialogRef = ref(null);
 
 const avatarFile = ref(null);
@@ -123,7 +125,7 @@ const handleAvatarDelete = async () => {
 
 <template>
   <div class="flex flex-col items-start gap-6 pb-6 w-full">
-    <div class="flex flex-col items-start gap-3 w-full">
+    <div ref="wrapperRef" class="flex flex-col items-start gap-3 w-full">
       <Avatar
         :src="avatarSrc || ''"
         :name="selectedContact?.name || ''"
@@ -173,7 +175,10 @@ const handleAvatarDelete = async () => {
           </span>
         </div>
       </div>
-      <ContactLabels :contact-id="selectedContact?.id" />
+      <ContactLabels
+        :wrapper-ref="wrapperRef"
+        :contact-id="selectedContact?.id"
+      />
     </div>
     <div class="flex flex-col items-start gap-6 w-full">
       <ContactsForm