fix: prevent menu item focus ring from exceeding popover boundaries (#7672)

* fix: prevent menu item focus ring from exceeding the boundaries of the popover

* try diff css changes...

Author: yihuiliao

packages/@react-spectrum/s2/src/Menu.tsx

@@ -104,6 +104,7 @@ export let menu = style({
   gridTemplateColumns: menuItemGrid,
   boxSizing: 'border-box',
   maxHeight: '[inherit]',
+  width: 'full',
   overflow: {
     isPopover: 'auto'
   },
@@ -187,6 +188,7 @@ export let menuitem = style({
   },
   alignItems: 'baseline',
   minHeight: 'control',
+  height: 'min',
   textDecoration: 'none',
   cursor: {
     default: 'default',

packages/@react-spectrum/s2/src/Picker.tsx

@@ -176,6 +176,7 @@ const quietFocusLine = style({
 export let menu = style({
   outlineStyle: 'none',
   display: 'grid',
+  width: 'full',
   gridTemplateColumns: {
     size: {
       S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],

packages/@react-spectrum/s2/src/Popover.tsx

@@ -79,6 +79,7 @@ let popover = style({
   // Don't be larger than full screen minus 2 * containerPadding
   maxWidth: '[calc(100vw - 24px)]',
   boxSizing: 'border-box',
+  display: 'flex',
   opacity: {
     isEntering: 0,
     isExiting: 0
@@ -226,7 +227,7 @@ const dialogStyle = style({
   borderRadius: '[inherit]',
   overflow: 'auto',
   position: 'relative',
-  size: 'full',
+  width: 'full',
   maxSize: '[inherit]'
 }, getAllowedOverrides({height: true}));