fix: prevent language&emoji pickers from overflowing (#735)

components/common/dropdown/Dropdown.vue

@@ -3,6 +3,7 @@ import { InjectionKeyDropdownContext } from '~/constants/symbols'
 
 defineProps<{
   placement?: string
+  autoBoundaryMaxSize?: boolean
 }>()
 
 const dropdown = $ref<any>()
@@ -19,7 +20,7 @@ defineExpose({
 </script>
 
 <template>
-  <VDropdown v-bind="$attrs" ref="dropdown" :class="colorMode.value" :placement="placement || 'auto'">
+  <VDropdown v-bind="$attrs" ref="dropdown" :class="colorMode.value" :placement="placement || 'auto'" :auto-boundary-max-size="autoBoundaryMaxSize">
     <slot />
     <template #popper="scope">
       <slot name="popper" v-bind="scope" />

components/publish/PublishEmojiPicker.client.vue

@@ -45,6 +45,7 @@ const hideEmojiPicker = () => {
 
 <template>
   <VDropdown
+    auto-boundary-max-size
     @apply-show="openEmojiPicker()"
     @apply-hide="hideEmojiPicker()"
   >

components/publish/PublishWidget.vue

@@ -354,7 +354,7 @@ defineExpose({
         </CommonTooltip>
 
         <CommonTooltip placement="top" :content="$t('tooltip.change_language')">
-          <CommonDropdown placement="bottom">
+          <CommonDropdown placement="bottom" auto-boundary-max-size>
             <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-12 mr--1>
               <div i-ri:translate-2 />
               <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />