Office-js: [Outlook] Add-in pane within Outlook OWA now incorrectly scrolling

[davidfishlock]

Expected Behavior

A scrollable region isn't shown when it isn't required. This has visually and functionally broken all Outlook Add-ins

Current Behavior

There is an unnecessary vertical scrollbar because a div with class "ms-Panel-commands" now has a top margin of 18px, this causes unnecessary vertical scrolling within the div of class "ms-Panel-scrollableContent".

Steps to Reproduce, or Live Example

• Open any Addin in Outlook OWA of type MessageReadCommandSurface or MessageComposeCommandSurface and observe the add-in pane.

Your Environment

• Platform [PC desktop, Mac, iOS, Office Online]: Outlook OWA
• Host [Excel, Word, PowerPoint, etc.]: Outlook OWA
• Office version number: N/A
• Operating System: Windows 10
• Browser (if using Office Online): Chrome, Firefox, Edge all versions

Useful logs

[exextoc]

Thanks for reporting this issue regarding. It has been put on our backlog. We unfortunately have no timelines to share at this point

[davidfishlock]

@exextoc it would be great to get some indication of when this is going to be resolved as we are actively developing a new add-in. This regression appeared yesterday and affects all addins.

We're unlikely to ship and put marketing effort into a new addin if it is going to be functionally broken on release so this is going to become a blocker for us.

It seems there are a number of contributors to this:

• div.ms-Panel-commands I think was previously hidden and has a top margin of 18px, which is pushing the header down.
• div.ms-Panel-content has a hardcoded height of "calc(100vh - 50px)". The 50px value is no longer correct given the appearance of the extra commands div.
• Even by removing div.ms-Panel-commands, the vertical scrolling will still break if the browser window width is reduced to a point where a horizontal scrollbar appears, as this occupies another 16px

So either:

• Preferably a more reliable method needs to be implemented for stretching div.ms-Panel-content vertically.
• Or the ms-Panel-commands div needs to be hidden again, and the height calculation on div.ms-Panel-content should be "calc(100vh - 66px)" so the layout doesn't break when a horizontal scrollbar appears. This would however mean there is an extra 16px gap at the foot of the panel when not horizontally scrolling.

[CameronDwyer]

This issue is hitting our commercial add-in and leading to a negative user experience (in some places we show our own scrollbar so this leads to unsightly double scrollbars). Please prioritize a fix since this affects ALL add-ins.

[corytheboyd]

+1 This is also negatively impacting our customers.

[exextoc]

We have fixed the bug and the fix should be available soon.