Summary
In a calling app built with the Calling Extensions SDK (@hubspot/calling-extensions-sdk), we are displaying the app in both of the following contexts:
- calling remote: The screen pinned to the HubSpot navigation bar (
iframeLocation: 'remote') - calling window: A standalone calling window (
iframeLocation: 'window')
When we switch the UI layout within the app to one with a different width on one of the screens, the synchronized UI on the other side also switches. However, the size of the display area on the other side does not match the updated UI, resulting in extra padding or content being cut off.
Steps to Reproduce
- Open both the calling remote and calling window.
- On one of the screens, switch the in-app UI from a narrow layout to a wide layout, or vice versa.
- On the other screen, check the UI layout against the size of the display area.
Actual Behavior vs. Expected Behavior
The UI layout change is reflected on the other side as well, but the display area sizes do not match. We expect the app to be displayed at the width and height appropriate for the updated UI, without any extra padding or clipping.
Based on the observed behavior, we suspect that while the UI state synchronization is working, the size update of the HubSpot calling iframe or its container may not be keeping up. However, the root cause has not yet been identified.
Questions
- Does
resizeWidget({ width, height })behave differently between calling remote and calling window? Are there additional constraints? - Is there any specific process required to update the size of each screen, or are there any known issues similar to this?
We have reproduced this issue with multiple internal users and in different browsers. We would appreciate it if you could share any verification methods or workarounds.