fix(Select): long value overflow

src/__screenshot_tests__/form-select-screenshot-test.tsx

@@ -14,22 +14,61 @@ test.each(devices)('Select elements on the initial state appear properly on %s',
     expect(image).toMatchImageSnapshot();
 });
 
-test.each(devices)('Select elements on a selected state appear properly on %s', async (device) => {
+test('Select elements on a selected state appear properly on DESKTOP', async () => {
     const page = await openStoryPage({
         id: 'components-select--default',
-        device,
+        device: 'DESKTOP',
+    });
+
+    const select = await screen.findByLabelText('Select a fruit (opcional)');
+    await select.click();
+    const selectOptions = await screen.findAllByRole('option', {name: 'Apple'});
+    // take the last one because the options are displayed in a portal, at the end of the body
+    await selectOptions?.at(-1)?.click();
+
+    const image = await page.screenshot({fullPage: true});
+    expect(image).toMatchImageSnapshot();
+});
+
+test('Select elements on a selected state appear properly on MOBILE_IOS', async () => {
+    const page = await openStoryPage({
+        id: 'components-select--default',
+        device: 'MOBILE_IOS',
+    });
+
+    const select = (await screen.findAllByRole('combobox'))[0];
+    await select.select('apple');
+
+    const image = await page.screenshot({fullPage: true});
+    expect(image).toMatchImageSnapshot();
+});
+
+test('Select elements on a selected state appear properly on DESKTOP with long texts', async () => {
+    const page = await openStoryPage({
+        id: 'components-select--default',
+        device: 'DESKTOP',
+    });
+
+    const select = await screen.findByLabelText('Select a fruit (opcional)');
+    await select.click();
+    const selectOptions = await screen.findAllByRole('option', {
+        name: 'A very very long text value for this option',
+    });
+    // take the last one because the options are displayed in a portal, at the end of the body
+    await selectOptions?.at(-1)?.click();
+
+    const image = await page.screenshot({fullPage: true});
+    expect(image).toMatchImageSnapshot();
+});
+
+test('Select elements on a selected state appear properly on MOBILE_IOS with long texts', async () => {
+    const page = await openStoryPage({
+        id: 'components-select--default',
+        device: 'MOBILE_IOS',
     });
 
-    if (device === 'MOBILE_IOS') {
-        const select = (await screen.findAllByRole('combobox'))[0];
-        await select.select('apple');
-    } else {
-        const select = await screen.findByLabelText('Select a fruit (opcional)');
-        await select.click();
-        const selectOptions = await screen.findAllByRole('option', {name: 'Apple'});
-        // take the last one because the options are displayed in a portal, at the end of the body
-        await selectOptions?.at(-1)?.click();
-    }
+    const select = (await screen.findAllByRole('combobox'))[0];
+    await select.select('longValue');
 
     const image = await page.screenshot({fullPage: true});
     expect(image).toMatchImageSnapshot();

src/__stories__/select-story.tsx

@@ -7,11 +7,12 @@ export default {
     component: Select,
 };
 
-const fruitOptions = fruitEntries.map(([text, value]) => ({text, value}));
-
 export const Default: StoryComponent = () => {
     const [value, setValue] = React.useState('');
 
+    const fruitOptions = fruitEntries.map(([text, value]) => ({text, value}));
+    fruitOptions.push({value: 'longValue', text: 'A very very long text value for this option'});
+
     return (
         <>
             <Stack space={16} dataAttributes={{testid: 'select-story'}}>

src/select.css.ts

@@ -97,6 +97,7 @@ export const selectContainerVariants = styleVariants({
 const selectBase = style([
     sprinkles({
         border: 'none',
+        overflow: 'hidden',
         color: skinVars.colors.textPrimary,
         background: 'transparent', // FieldContainer gives the correct background color
         width: '100%',
@@ -131,6 +132,7 @@ export const selectVariants = styleVariants({
 const selectTextBase = style([
     sprinkles({
         position: 'absolute',
+        overflow: 'hidden',
         maxWidth: '100%',
         color: skinVars.colors.textPrimary,
     }),

src/select.tsx

@@ -339,6 +339,7 @@ const Select: React.FC<SelectProps> = ({
                 style={{
                     paddingTop: label ? 24 : 16,
                     paddingBottom: label ? 8 : 16,
+                    paddingRight: 48,
                     // Override default browser opacity when disabled. This opacity also affects the label.
                     // Without this fix, the label is invisible when disabled
                     opacity: 1,