How to fix Chat for JSM widget size not adjusting on mobile

How to fix Chat for JSM widget size not adjusting on mobile

Problem

When embedding the Chat for Jira Service Management widget into a WebView within a Flutter mobile phone app, some users report that the widget appears too small, rendered at desktop size rather than adjusting to the mobile phone screen. This issue does not occur when the widget is used directly on a Jira customer portal.

Solution

Follow these steps to ensure the Chat Widget is responsive and displays correctly on mobile phones:

1. Verify browser compatibility

Ensure the behavior is consistent across multiple browsers (for example, Chrome, Firefox, Safari, Edge).

2. Check if the widget is responsive in standard Jira portals

If the widget displays correctly within a Jira customer portal but not on the embedded webpage, the issue is likely related to how the page renders content.

3. Modify the web page's meta configuration

To ensure a responsive layout, add the following meta parameter inside the <head> section of your hosted webpage:

<meta name="viewport" content="initial-scale=1.0" />

This adjustment will make the viewport scale properly to fit the mobile screen, ensuring that the Chat widget displays correctly.

4. Verify the changes

After adding the meta tag, reload the page and check the widget’s appearance. Compare it with the previous layout. Here is the result without this meta parameter:

image-20250311-054140.png

And here is this meta parameter present:

image-20250311-054155.png

5. Further debugging (If needed)

If the issue persists, inspect how other styles or scripts on the webpage might be affecting the widget’s scaling. Check if any CSS properties related to width or zoom are restricting the widget’s responsiveness.

You can find more details about this here: W3Schools.com