Opened 5 months ago
Closed 5 months ago
#64880 closed defect (bug) (fixed)
Application password field is overlapping its container on small screens
| Reported by: | audrasjb | Owned by: | audrasjb |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.0 |
| Component: | Application Passwords | Version: | |
| Severity: | normal | Keywords: | good-first-bug has-patch commit |
| Cc: | Focuses: | ui, css |
Description
I noticed the application password input field is overlapping its container on small screens.
See screenshots below.
I'm opening this ticket as a good-first-bug so please keep it for very new contributors if possible.
Attachments (3)
Change History (8)
This ticket was mentioned in Slack in #core-test by ozgur_sar. View the logs.
5 months ago
@
5 months ago
This patch fixes the overflow issue of the application password input field on small screens. The input field had a fixed width of 19em, which caused it to overflow its container on smaller viewports. The fix applies width: 100% along with max-width: 19em, ensuring it scales properly within its container while preserving its intended size on larger screens. Tested locally and confirmed no regressions.
#2
@
5 months ago
@ekla There was a recent change related to this component in changeset 62043. Please confirm if those cases are covered as well.
This ticket was mentioned in PR #11299 on WordPress/wordpress-develop by @ekla.
5 months ago
#3
- Keywords has-patch added; needs-patch removed
This patch resolves an issue where the application password input field overflows its container on smaller screens.
The fix updates the CSS to use:
- width: 100%
- max-width: 20em
This ensures proper responsiveness while maintaining the intended width on larger screens.
Tested locally.
Trac ticket: https://core.trac.wordpress.org/ticket/64880
## Use of AI Tools
AI assistance: Yes
Tool(s): ChatGPT
Model(s): GPT-5.3
Used for: To find how to enable Application Password
@
5 months ago
This patch fixes the overflow issue of the application password input field on small screens. The input field had a fixed width of 20em, which caused it to overflow its container on smaller viewports. The fix applies width: 100% along with max-width: 19em, ensuring it scales properly within its container while preserving its intended size on larger screens. Tested locally and confirmed no regressions.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Issue on small screen