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

This commit is contained in:
Nicolò Ribaudo 2023-01-03 13:17:04 +01:00 committed by GitHub
parent b14add8c83
commit f4ff6ee35d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 2 deletions

View file

@ -3,6 +3,7 @@ import { InjectionKeyDropdownContext } from '~/constants/symbols'
defineProps<{ defineProps<{
placement?: string placement?: string
autoBoundaryMaxSize?: boolean
}>() }>()
const dropdown = $ref<any>() const dropdown = $ref<any>()
@ -19,7 +20,7 @@ defineExpose({
</script> </script>
<template> <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 /> <slot />
<template #popper="scope"> <template #popper="scope">
<slot name="popper" v-bind="scope" /> <slot name="popper" v-bind="scope" />

View file

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

View file

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