Making WordPress.org

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)

8386.patch (656 bytes ) - added by bejignesh 6 weeks ago.
Constrain the sidebar textarea so resizing it does not push the border and resize handle outside the clipped widget area.
8386-before.png (429.9 KB ) - added by bejignesh 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.
8386-after.png (430.2 KB ) - added by bejignesh 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.

Download all attachments as: .zip

Change History (4)

@bejignesh
6 weeks ago

Constrain the sidebar textarea so resizing it does not push the border and resize handle outside the clipped widget area.

@bejignesh
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.

@bejignesh
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 @bejignesh
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.

Note: See TracTickets for help on using tickets.