[SF][a11y][ui5-date-picker] Date picker has horizontal scroll bar at 320px width responsive view

[zhangliangyi]

Bug Description

When font-size of body is set as 16px, the calendar dialog opened will have horizontal scroll bar at 320px width responsive view.

Expected Behavior

Horizontal scroll bar should not be displayed.

Steps to Reproduce

When font-size of body is set as 16px, per the css variable defined in

ui5-webcomponents/packages/main/src/themes/base/sizes-parameters.css

Line 4 in 4a3366a

--_ui5_calendar_width: 20.5rem;

The calendar width will be 328px which causes the display of scroll bar

Isolated Example

If possible, please provide an isolated example by forking CodeSandbox.

Context

• UI5 Web Components version: 1.6.0
• OS/Platform: MacOS
• Browser: Edge
• Affected component: ui5-date-picker

Priority

• Low
• Medium
• High
• Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: SF
• Business impact: {...}

[nikolay-kolarov]

Hello @SAP/ui5-webcomponents-topic-b ,

Could you please have a look?

Thanks,
Nikolay

[unazko]

Hello @zhangliangyi,

Is there a specific reason for setting the font-size to 16px?

Best Regards,
Boyan Rakilovski

[zhangliangyi]

@unazko
We are using 16px as the basis of rem is SF applications. Just wonder if there is any standard about that only 14px font-size can be used as basis of rem in application with ui5-webcomponents?

[unazko]

Hi @zhangliangyi,

Apologies for the late response. I've got confused after many discussions on this topic.
There is no such standard indeed. We're going to fix the width of the calendar component now.

Best Regards,
Boyan