[VariantManagement]: [Application in width equivalent to 320 CSS pixels, ‘Save as’, ‘Manage’ buttons associated within ‘Standard’ dialog are getting truncated]

[sanjayC5373903]

Describe the bug

<VariantManagement ref={vmFieldRef} onSelect={e => updateVariantId(e.detail.selectedItems[0].id)} onSaveManageViews={e => handleOnSaveManageViews(e, onSaveManageView,setIsStandardAutoApplyMsgBox)} closeOnItemSelect={true} dirtyState={isVariantDirty} onSaveAs={e => handleVariantOnSave({ event: e, currentVariant: currentVariant, handleVariantSave: handleVariantCreate, setNewVariantDetails: setNewVariantDetails }) } onSave={e => handleVariantOnSave({ event: e, currentVariant: currentVariant, handleVariantSave: handleVariantEdit, setNewVariantDetails: setNewVariantDetails }) } data-testid="VariantManagementField" onFocus={e => handleAria(e)}

{variantList?.map(item => { return ( <VariantItem aria-label={item.viewName} // placement="right" selected={parseInt(item.id) === parseInt(currentVariant.id)} id={item.id} global={item.public} data-testid="VariantItemField" author={item.createdBy} isDefault={item.default} applyAutomatically={item.autoApply} hideDelete={item.userId !== currentUserId} labelReadOnly={item.userId !== currentUserId} readOnly={item.userId !== currentUserId} key={item.id}

{item.viewName} ); })}

Here we using default placement bottom. popover open at bottom side. but the popover size is not looking proper. and variant item also not display. we loss the content. see below image.

Isolated Example

No response

Reproduction steps

1. 2. 3. ...

Expected Behaviour

The contents should be present at a width equivalent to 320 CSS pixels without loss of information or functionality

Screenshots or Videos

No response

UI5 Web Components for React Version

0.27.5

UI5 Web Components Version

1.6.0

Browser

Chrome

Operating System

Windows11

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @sanjayC5373903

please add a reproducible example, by using this StackBlitz template.

[jadhavarjun]

Hi @Lukas742 ,

Please find the link to Storybook below. It contains a reproducible example of the issue.

Storybook Link: https://sap.github.io/ui5-webcomponents-react/?path=/story/inputs-variantmanagement--default&args=placement:Right&globals=viewport:mobile1

I am also attaching a screenshot of storybook in which when we are viewing in mobile view with width 320 pixel then the Save and Manage buttons are getting truncated.

[Lukas742]

Hi @sanjayC5373903

The ResponsivePopover used as the popover for the VariantManagement utilizes the user-agent, among other factors, to determine whether the popup should be rendered as a Dialog (mobile) or as a Popover. Since this is not checked in runtime, but only on initial render you'll still see the Popover if you didn't refresh the page. Opposite to the dev-tool's device view, Storybook doesn't change the user-agent, so even though the viewport is rendered with 320px, it's not recognized as mobile and therefore a Popover is still displayed. If used on a mobile device, a Dialog is displayed and all buttons are fully visible:

I'm going to close this issue now, as the component is working as intended. In case of further questions or additional feedback, please feel free to leave another message here. We're also monitoring closed issues :wink: