From f4ff6ee35dcea373a3b3bd2b9f2ddd97412600f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Tue, 3 Jan 2023 13:17:04 +0100
Subject: [PATCH] fix: prevent language&emoji pickers from overflowing (#735)

---
 components/common/dropdown/Dropdown.vue          | 3 ++-
 components/publish/PublishEmojiPicker.client.vue | 1 +
 components/publish/PublishWidget.vue             | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/common/dropdown/Dropdown.vue b/components/common/dropdown/Dropdown.vue
index 313369bd..805ba334 100644
--- a/components/common/dropdown/Dropdown.vue
+++ b/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" />
diff --git a/components/publish/PublishEmojiPicker.client.vue b/components/publish/PublishEmojiPicker.client.vue
index f2713232..7bbea4cb 100644
--- a/components/publish/PublishEmojiPicker.client.vue
+++ b/components/publish/PublishEmojiPicker.client.vue
@@ -45,6 +45,7 @@ const hideEmojiPicker = () => {
 
 <template>
   <VDropdown
+    auto-boundary-max-size
     @apply-show="openEmojiPicker()"
     @apply-hide="hideEmojiPicker()"
   >
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 41a5f109..7e8a7c88 100644
--- a/components/publish/PublishWidget.vue
+++ b/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 />