Select: prevent item horizontal offset to be lower than 0

[simrobin]

Bug report

The issue occurs when a Select item has more content than the screen viewport width.

Current Behavior

When the content of an item in a select, it goes out of the screen:

Expected behavior

The Select should be in left: 0 position and not get out of the screen.

Reproducible example

https://codesandbox.io/p/sandbox/peaceful-moore-57lrc4

Suggested solution

(I'm not quite sure about the rtl solution)

diff --git c/packages/react/select/src/Select.tsx w/packages/react/select/src/Select.tsx
index 11d0ba5b..a04f5fe2 100644
--- c/packages/react/select/src/Select.tsx
+++ w/packages/react/select/src/Select.tsx
@@ -802,17 +802,25 @@ const SelectItemAlignedPosition = React.forwardRef<
       const valueNodeRect = context.valueNode.getBoundingClientRect();
       const itemTextRect = selectedItemText.getBoundingClientRect();
 
+      console.log('selectedItemText', selectedItemText);
+
       if (context.dir !== 'rtl') {
         const itemTextOffset = itemTextRect.left - contentRect.left;
         const left = valueNodeRect.left - itemTextOffset;
         const leftDelta = triggerRect.left - left;
         const minContentWidth = triggerRect.width + leftDelta;
         const contentWidth = Math.max(minContentWidth, contentRect.width);
-        const rightEdge = window.innerWidth - CONTENT_MARGIN;
-        const clampedLeft = clamp(left, [CONTENT_MARGIN, rightEdge - contentWidth]);
 
-        contentWrapper.style.minWidth = minContentWidth + 'px';
-        contentWrapper.style.left = clampedLeft + 'px';
+        if (contentWidth >= window.innerWidth) {
+          contentWrapper.style.left = CONTENT_MARGIN + 'px';
+          contentWrapper.style.maxWidth = window.innerWidth - CONTENT_MARGIN * 2 + 'px';
+        } else {
+          const rightEdge =
+            contentWidth <= window.innerWidth ? window.innerWidth - CONTENT_MARGIN : contentWidth;
+          const clampedLeft = clamp(left, [CONTENT_MARGIN, rightEdge - contentWidth]);
+          contentWrapper.style.left = clampedLeft + 'px';
+          contentWrapper.style.minWidth = minContentWidth + 'px';
+        }
       } else {
         const itemTextOffset = contentRect.right - itemTextRect.right;
         const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
@@ -822,8 +830,13 @@ const SelectItemAlignedPosition = React.forwardRef<
         const leftEdge = window.innerWidth - CONTENT_MARGIN;
         const clampedRight = clamp(right, [CONTENT_MARGIN, leftEdge - contentWidth]);
 
-        contentWrapper.style.minWidth = minContentWidth + 'px';
-        contentWrapper.style.right = clampedRight + 'px';
+        if (contentWidth >= window.innerWidth) {
+          contentWrapper.style.right = window.innerWidth - CONTENT_MARGIN + 'px';
+          contentWrapper.style.maxWidth = window.innerWidth - CONTENT_MARGIN * 2 + 'px';
+        } else {
+          contentWrapper.style.minWidth = minContentWidth + 'px';
+          contentWrapper.style.right = clampedRight + 'px';
+        }
       }
 
       // -----------------------------------------------------------------------------------------

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-select	1.2.1
React	n/a	latest
Browser	chrome	110.0.5481.77 (Official Build) (arm64)
Assistive tech
Node	n/a	18.15.0
npm/yarn	pnpm	7.30.3
Operating System	macOS	Venture 13.2.1