My Account not responsive and cannot be embedded on mobile (7.1)

[leonardorobertolopez]

Description

1. Responsiveness issue
   When navigating to the "Change your password" section on mobile, the layout exhibits the following problems:

• Large empty spaces appear on both sides and at the bottom of the screen.
• The content does not fully expand to fit the mobile viewport.
• The icon appears oversized relative to the surrounding content.
• Text alignment and wrapping appear inconsistent.

These symptoms indicate layout constraints likely due to fixed paddings or rigid column widths applied to key containers such as .layout-content.padded or .oxygen-app-shell-main, without mobile breakpoint adjustments.

2. Embedded view rendering issue
   In a scenario where the My Account application is embedded within a mobile application (e.g., via a WebView or similar container), the session timeout dialog does not scale correctly. The following issues are observed:

• Excessive spacing around the modal.
• Text overflow and truncation (e.g., the message content is clipped horizontally).
• Visual misalignment within the popup structure.

This suggests that certain modal elements are not adapting to constrained or embedded viewports, potentially due to fixed widths or missing responsive layout rules.

Steps to Reproduce

Scenario 1

1. Start a fresh instance of WSO2 Identity Server 7.1.

2. Access the My Account application from a mobile device or using a browser in mobile emulation mode (e.g., DevTools).

3. Navigate to the Security → Change your password section.

4. Observe layout issues such as excessive empty space, oversized icons, and misaligned or truncated content.

Scenario 2

1. Embed the My Account application into a mobile application or local HTML page using an <iframe>.

2. Wait for session timeout and observe the rendering of the timeout dialog within the embedded view.

Version

7.1

Environment Details (with versions)

No response