fix(MenuSubContent): content was overflow out of viewport (#645)

* fix: all subcontent should prioritzie position for smaller viewport

* fix: position flip depends on the prioritzePosition prop

* chore: lint

Author: zernonia

packages/radix-vue/src/Menu/MenuSubContent.vue

@@ -24,7 +24,9 @@ import { SUB_CLOSE_KEYS } from './utils'
 import { Presence } from '@/Presence'
 import { useForwardExpose, useForwardPropsEmits } from '@/shared'
 
-const props = defineProps<MenuSubContentProps>()
+const props = withDefaults(defineProps<MenuSubContentProps>(), {
+  prioritizePosition: true,
+})
 const emits = defineEmits<MenuSubContentEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)

packages/radix-vue/src/Popper/PopperContent.vue

@@ -212,6 +212,11 @@ const computedMiddleware = computedEager(() => {
       mainAxis: props.sideOffset + arrowHeight.value,
       alignmentAxis: props.alignOffset,
     }),
+    props.prioritizePosition
+      && props.avoidCollisions
+      && flip({
+        ...detectOverflowOptions.value,
+      }),
     props.avoidCollisions
       && shift({
         mainAxis: true,