Problem statement

On a responsive mobile site, where "pinch-to-zoom" is disabled, the Issue Collector popup is completely unusable.

How to reproduce the issue.

The site we're developing has the following configuration:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

When you click the Issue collector tab/button, the popup appears centered in the viewport, but the width and height are fixed at sizes way too large for the window.

Proposed resolution

Make the pop-up form's height and width, and layout respond to the browser frame (i.e. adaptive/responsive web design).

Introduce media queries at various standard breakpoints to offer alternative layouts for smaller screens.

Workaround

I've been able to achieve what I need using the following snippet of CSS:

/* Issue collector tweaks for smaller screens */
@media screen and (max-width: 740px) {
  .atlwdg-popup {
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

UPDATE: The pop-up is still too wide, the email field is still partially hidden and the text-area doesnt wrap below its field label, but since these elements are placed within an i-frame I have no control over their theming from my application.

As a side note, this issue appears to affect All popups produced by Jira, and this simple code tweak could be released for a quick win on mobile devices.