diff --git a/components/MorphemeWithPronunciation.vue b/components/MorphemeWithPronunciation.vue
index 7d5909b5f..7ef1d6551 100644
--- a/components/MorphemeWithPronunciation.vue
+++ b/components/MorphemeWithPronunciation.vue
@@ -1,5 +1,5 @@
 <template>
-    <Popover v-if="pronoun.getMorpheme(morpheme, counter)">
+    <Popover v-if="pronoun.getMorpheme(morpheme, counter)" resize>
         <Morpheme
             :pronoun="pronoun"
             :morpheme="morpheme"
diff --git a/components/Popover.vue b/components/Popover.vue
index 1c58c07bc..e6bcb856c 100644
--- a/components/Popover.vue
+++ b/components/Popover.vue
@@ -6,14 +6,21 @@
     ><slot></slot><span
         v-if="visible && hasContent"
         ref="floating"
-        class="popover bg-dark text-white px-2 py-1 rounded"
+        class="popover"
         :style="floatingStyles"
-    ><slot name="content"></slot><span ref="arrow" class="popover-arrow bg-dark text-white" :style="arrowStyles"></span></span></span>
+    ><span
+        ref="arrow"
+        class="popover-arrow bg-dark text-white"
+        :style="arrowStyles"
+    ></span><div
+        ref="content"
+        class="overflow-auto bg-dark text-white px-2 py-1 rounded"
+    ><slot name="content"></slot></div></span></span>
 </template>
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
 import Vue from 'vue';
 import type { CSSProperties } from 'vue/types/jsx';
 import type { ComputePositionReturn, Placement } from '@floating-ui/dom';
@@ -44,12 +51,14 @@ interface Data {
 interface Refs {
     reference: HTMLSpanElement | undefined;
     floating: HTMLSpanElement | undefined;
+    content: HTMLSpanElement | undefined;
     arrow: HTMLSpanElement | undefined;
 }
 
 export default Vue.extend({
     props: {
         placement: { default: 'bottom', type: String as PropType<Placement> },
+        resize: { type: Boolean },
     },
     data(): Data {
         return {
@@ -125,8 +134,24 @@ export default Vue.extend({
             if (!this.$tRefs.reference || !this.$tRefs.floating || !this.$tRefs.arrow) {
                 return;
             }
+            const middleware = [offset(remToPx(0.25)), flip(), shift()];
+            if (this.resize) {
+                middleware.push(size({
+                    apply: ({ availableWidth, availableHeight }) => {
+                        if (!this.$tRefs.content) {
+                            return;
+                        }
+                        Object.assign(this.$tRefs.content.style, {
+                            maxWidth: `${availableWidth}px`,
+                            maxHeight: `${availableHeight}px`,
+                        });
+                    },
+                }));
+            }
+            middleware.push(arrow({ element: this.$tRefs.arrow }));
+
             this.position = await computePosition(this.$tRefs.reference, this.$tRefs.floating, {
-                middleware: [offset(remToPx(0.25)), flip(), shift(), arrow({ element: this.$tRefs.arrow })],
+                middleware,
                 placement: this.placement as Placement,
             });
         },