[ZEPPELIN-6586] Make the login page responsive on narrow viewports - #5400
Open
yuminnnnni wants to merge 1 commit into
Open
[ZEPPELIN-6586] Make the login page responsive on narrow viewports#5400yuminnnnni wants to merge 1 commit into
yuminnnnni wants to merge 1 commit into
Conversation
The login panel was a fixed 800px with absolutely positioned columns, so at a 375px viewport it overflowed both sides of the screen. Lay the panel out with flexbox instead: the desktop two-column presentation is unchanged (500px form + 300px sidebar), while the panel now shrinks with the viewport and stacks the sidebar below the form at @screen-sm-max. On short viewports the panel is capped to the viewport height and scrolls internally. Add narrow-viewport Playwright coverage to the login suite for both light and dark themes: no document-level horizontal overflow and the login controls stay fully visible and usable. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
voidmatcha
requested changes
Aug 9, 2026
voidmatcha
left a comment
voidmatcha
left a comment
Member
There was a problem hiding this comment.
expect(overflow).toBe(0) passes on master too, so this assertion cannot fail. In Chromium, overflow from an absolutely positioned element never reaches documentElement.scrollWidth. At 375px the panel measurably spans -212 to 588, yet that value stays at the viewport width of 375. body.scrollWidth reports 587 for the same page, so reading body makes the assertion 212 on master and 0 here, which is what this step is trying to express.
Suggestion inline. The toBeInViewport checks below do fail on master, so the test still catches the regression.
|
|
||
| await test.step('Then the document should not overflow horizontally', async () => { | ||
| const overflow = await page.evaluate( | ||
| () => document.documentElement.scrollWidth - document.documentElement.clientWidth |
Member
There was a problem hiding this comment.
Suggested change
| () => document.documentElement.scrollWidth - document.documentElement.clientWidth | |
| () => document.body.scrollWidth - document.documentElement.clientWidth |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is this PR for?
The New UI login page centers a fixed 800px panel (500px form + 300px sidebar, absolutely positioned), so at narrow viewports such as 375x812 the panel overflows both sides of the screen: part of the form is unreachable off the left edge and the welcome sidebar is clipped on the right.
This PR lays the panel out with flexbox instead. The desktop two-column presentation is pixel-identical (500px form + 300px sidebar at the same 800px width), while the panel now shrinks with the viewport and stacks the sidebar below the form at
@screen-sm-max(767px), following the existing theme tokens. On short viewports (e.g. landscape phones) the stacked panel is capped to the viewport height and scrolls internally, so the form always stays reachable. No new dependency is introduced.Narrow-viewport Playwright coverage is added to the existing login suite for both light and dark themes: it asserts no document-level horizontal overflow at 375px and that the username field, password field, and login button stay fully visible and usable.
What type of PR is it?
Bug Fix
Todos
What is the Jira issue?
How should this be tested?
cd zeppelin-web-angular && npx playwright test tests/login/login.spec.ts --project=chromium(requiresconf/shiro.iniso the login page is shown)/#/loginat 375x812 and confirm the form is fully visible with no horizontal overflow; repeat in light and dark themescd zeppelin-web-angular && npm run lintScreenshots (if appropriate)
Desktop (1280px) is unchanged:
Questions:
🤖 Generated with Claude Code