Opened 6 weeks ago
Last modified 6 weeks ago
#8386 new defect (bug)
Textarea border disappears after resizing on Documentation contribution form
| Reported by: | tusharaddweb | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | |
| Component: | Make (Get Involved) / P2 | Keywords: | needs-patch |
| Cc: |
Description
The "Contribution" textarea on the Docs team's contribution submission form loses its visible border once the user manually resizes (stretches) it using the browser's native resize handle.
Steps to reproduce:
Go to the https://make.wordpress.org/docs/ page.
Click and drag the resize handle in the bottom-right corner of the "Contribution" textarea to make it larger.
Observe the textarea after resizing.
Expected behavior:
The textarea border should remain visible at its full size/shape after resizing, so users can see its boundaries and still access the resize handle.
Actual behavior:
After resizing, the border becomes invisible against the white background. The textarea's boundary is not distinguishable, making it hard to tell where the field ends or to grab the handle to resize it again.
Attachments (3)
Change History (4)
@
6 weeks ago
Current behaviour: after the textarea is dragged wider than the sidebar, its right border and bottom right resize handle are clipped away. The Email field above still shows a complete box.
@
6 weeks ago
With 8386.patch applied: the same resize keeps the field inside the sidebar, so the border stays closed and the resize handle is visible again.
#1
@
6 weeks ago
Reproduced on make.wordpress.org/docs/, though the cause turns out not to be the border.
The border is never removed. Reading the computed style on the textarea before and after
dragging it, it stays 1px solid rgb(151, 154, 161) throughout. What happens is that the
field is clipped.
The sidebar in p2-breathe is:
.widget-area { float: right; overflow: hidden; width: 25%; }
The overflow: hidden is there to contain the float, so it should stay. The textarea is
resize: both inside that 290px column, so dragging it wider pushes it outside the
sidebar and everything past the edge is clipped. Measured on the live page, dragging to
600px puts 310px beyond the boundary, and what gets cut off is the right border together
with the resize handle in the bottom right corner. That matches the report of not being
able to tell where the field ends or grab the handle again.
Capping the field fixes it, and vertical resizing is unaffected since the sidebar grows
with its content:
| width | clipped at right edge | |
| before resize | 290px | 0px |
| resized, current CSS | 600px | 310px |
| resized, with patch | 290px | 0px |
8386.patch adds the rule to wporg-breathe-2024, the child theme, rather than touching the
p2-breathe parent.
Screenshots attached, taken on the live page with the rule applied through devtools. In
the broken one the right border and the resize handle are both missing; in the fixed one
the box is closed and the handle is back.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Constrain the sidebar textarea so resizing it does not push the border and resize handle outside the clipped widget area.