[UX] Close account console mobile nav after selecting a page by lkiesow · Pull Request #51309 · keycloak/keycloak

lkiesow · 2026-07-30T10:39:22Z

If you have ever used Keycloak's Account Console on mobile, you probably noticed some UI/UX annoyances. For example, if you open the main menu, click on another category (e.g. Signing-in), the new page will be loaded in the background, but you don't immediately notice since the page is still overlayed by the main menu and you have to realize that you have to close it manually to continue.

This patch fixes that issue. It appeared onn narrow viewports (phones, or a desktop browser window resized below PatternFly's 1200px breakpoint).

This closes #51423

EDIT: Rebased to current main

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

edewit

@lkiesow thank you for this contribution, but you should create an issue for this and link it to this PR also a playwright test would be a good addition

see the CONTIBUTING.md

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

lkiesow · 2026-08-04T13:09:38Z

Thanks for the review, @edewit. I've created and linked an issue and added Playwright tests which should cover both the desktop and mobile navigation.

edewit · 2026-08-05T06:30:37Z

super thank you

keycloak-github-bot

Unreported flaky test detected, please review

keycloak-github-bot · 2026-08-05T08:16:09Z

Unreported flaky test detected

If the flaky tests below are affected by the changes, please review and update the changes accordingly. Otherwise, a maintainer should report the flaky tests prior to merging the PR.

org.keycloak.testsuite.broker.KcOidcBrokerTest#loginWithExistingUserWithBruteForceEnabled

Keycloak CI - Java Distribution IT (windows-latest - temurin - 21)

org.openqa.selenium.TimeoutException: 
Expected condition failed: waiting for value to contain (ignoring case) "sign in to". Current value: "AUTH_RESPONSE" (tried for 5 second(s) with 500 milliseconds interval)
Build info: version: '4.28.1', revision: '73f5ad48a2'
System info: os.name: 'Windows Server 2025', os.arch: 'amd64', os.version: '10.0', java.version: '21.0.11'
Driver info: org.jboss.arquillian.drone.webdriver.htmlunit.DroneHtmlUnitDriver_ByGraphene
...

Report flaky test

lkiesow · 2026-08-05T11:50:07Z

Looking at the test failure, this doesn't seem to have anything to do with this pull request:

jdk-integration-tests: cancelled

This patch didn't modify any of the Java code. I don't think this patch broke that test.

EDIT: Also rebased on top of the latest main.

If you have ever used Keycloak's Account Console on mobile, you probably noticed some UI/UX annoyances. For example, if you open the main menu, click on another category (e.g. Signing-in), the new page will be loaded in the brackground, but you sont immediately notice since the page is still overlayed by the main menu and you have to realize that you have to close it manually to continue. This patch fixes that issue. It appeared onn narrow viewports (phones, or a desktop browser window resized below PatternFly's 1200px breakpoint). Signed-off-by: Lars Kiesow <lkiesow@uos.de>

This tests that on narrow viewports the sidebar nav is an overlay, and it must close after selecting a page instead of staying on top of the newly loaded content. A second test guards that desktop viewports keep the persistent sidebar open, so a future change can't silently drop the width check. Signed-off-by: Lars Kiesow <lkiesow@uos.de>

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

…k#51309) * Close account console mobile nav after selecting a page If you have ever used Keycloak's Account Console on mobile, you probably noticed some UI/UX annoyances. For example, if you open the main menu, click on another category (e.g. Signing-in), the new page will be loaded in the brackground, but you sont immediately notice since the page is still overlayed by the main menu and you have to realize that you have to close it manually to continue. This patch fixes that issue. It appeared onn narrow viewports (phones, or a desktop browser window resized below PatternFly's 1200px breakpoint). Signed-off-by: Lars Kiesow <lkiesow@uos.de> * Add Playwright test for mobile nav auto-close This tests that on narrow viewports the sidebar nav is an overlay, and it must close after selecting a page instead of staying on top of the newly loaded content. A second test guards that desktop viewports keep the persistent sidebar open, so a future change can't silently drop the width check. Signed-off-by: Lars Kiesow <lkiesow@uos.de> --------- Signed-off-by: Lars Kiesow <lkiesow@uos.de>

…k#51309) * Close account console mobile nav after selecting a page If you have ever used Keycloak's Account Console on mobile, you probably noticed some UI/UX annoyances. For example, if you open the main menu, click on another category (e.g. Signing-in), the new page will be loaded in the brackground, but you sont immediately notice since the page is still overlayed by the main menu and you have to realize that you have to close it manually to continue. This patch fixes that issue. It appeared onn narrow viewports (phones, or a desktop browser window resized below PatternFly's 1200px breakpoint). Signed-off-by: Lars Kiesow <lkiesow@uos.de> * Add Playwright test for mobile nav auto-close This tests that on narrow viewports the sidebar nav is an overlay, and it must close after selecting a page instead of staying on top of the newly loaded content. A second test guards that desktop viewports keep the persistent sidebar open, so a future change can't silently drop the width check. Signed-off-by: Lars Kiesow <lkiesow@uos.de> --------- Signed-off-by: Lars Kiesow <lkiesow@uos.de> Signed-off-by: alehhu <159355663+alehhu@users.noreply.github.com>

lkiesow requested a review from a team as a code owner July 30, 2026 10:39

Copilot AI balanced review requested due to automatic review settings July 30, 2026 10:39

lkiesow requested a review from a team as a code owner July 30, 2026 10:39

Copilot AI reviewed Jul 30, 2026

lkiesow changed the title ~~Close account console mobile nav after selecting a page~~ [UX] Close account console mobile nav after selecting a page Aug 3, 2026

lkiesow force-pushed the mobile-nav branch from f359e9c to efa3af2 Compare August 3, 2026 13:59

Copilot AI review requested due to automatic review settings August 3, 2026 13:59

Copilot AI reviewed Aug 3, 2026

edewit approved these changes Aug 4, 2026

View reviewed changes

edewit enabled auto-merge (squash) August 4, 2026 07:04

edewit disabled auto-merge August 4, 2026 07:05

edewit requested changes Aug 4, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings August 4, 2026 13:07

Copilot AI reviewed Aug 4, 2026

lkiesow requested a review from edewit August 4, 2026 13:08

lkiesow force-pushed the mobile-nav branch from 3b4052f to eed3c74 Compare August 4, 2026 13:14

edewit approved these changes Aug 5, 2026

View reviewed changes

keycloak-github-bot Bot added the flaky-test label Aug 5, 2026

keycloak-github-bot Bot reviewed Aug 5, 2026

View reviewed changes

lkiesow added 2 commits August 5, 2026 13:57

Copilot AI review requested due to automatic review settings August 5, 2026 12:08

lkiesow force-pushed the mobile-nav branch from eed3c74 to 8df5aff Compare August 5, 2026 12:08

Copilot AI reviewed Aug 5, 2026

edewit enabled auto-merge (squash) August 5, 2026 13:53

edewit merged commit 8a38371 into keycloak:main Aug 5, 2026
90 checks passed

Navigation Menu

Uh oh!

[UX] Close account console mobile nav after selecting a page - #51309

[UX] Close account console mobile nav after selecting a page#51309
edewit merged 2 commits into
keycloak:mainfrom
lkiesow:mobile-nav

lkiesow commented Jul 30, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

edewit left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

lkiesow commented Aug 4, 2026

Uh oh!

edewit commented Aug 5, 2026

Uh oh!

keycloak-github-bot Bot left a comment

Uh oh!

keycloak-github-bot Bot commented Aug 5, 2026

Uh oh!

lkiesow commented Aug 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

lkiesow commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

edewit left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

lkiesow commented Aug 4, 2026

Uh oh!

edewit commented Aug 5, 2026

Uh oh!

keycloak-github-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

keycloak-github-bot Bot commented Aug 5, 2026

Unreported flaky test detected

org.keycloak.testsuite.broker.KcOidcBrokerTest#loginWithExistingUserWithBruteForceEnabled

Uh oh!

lkiesow commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lkiesow commented Jul 30, 2026 •

edited

Loading

lkiesow commented Aug 5, 2026 •

edited

Loading