We’re using newer Atlaskit / Atlassian Design System packages and noticed a layout issue in Forge apps rendered in narrow Jira issue view surfaces, e.g., jira:issueContext.
The jira:issueContext module is naturally a fairly narrow embedded app surface:
In that context, newer Atlaskit form controls such as @atlaskit/textfield, @atlaskit/textarea, and @atlaskit/select appear to increase their font size from the normal desktop body size to 16px when the available width is small enough. According to the package changelogs, this is to support mobile, but it is awkward in app panels that are narrow while still being part of a desktop web UI.
- @atlaskit/select@18.8.0 says: “Update the font size for the textarea and select components at the xs breakpoint. The font size will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is focused. Styles for larger breakpoints will remain unchanged.”
- @atlaskit/select@21.4.0 says: “release previously feature-gated change to textfield, textarea, and select to increase font size to 16px on mobile”
From inspecting the generated package CSS, this seems to be implemented as a viewport-width breakpoint rather than device detection: the controls use the larger body font by default, then switch back to the normal body font at @media (min-width: 30rem). In an issue context panel, the iframe/panel width can fall below that threshold even on desktop, triggering the “mobile” font sizing.
A few questions:
- Is this behavior expected for narrow embedded app surfaces, or should Atlaskit distinguish mobile devices from narrow desktop containers here?
- Is there a supported/documented way to opt out of the 16px mobile font bump for apps or other embedded contexts?
Any guidance on the recommended approach would be appreciated.