[wp-trac] [WordPress Trac] #47477: Content overflows and is cut off at 200% text enlarge

[WordPress Trac]

#47477: Content overflows and is cut off at 200% text enlarge
---------------------------------------------+-----------------------------
 Reporter:  kjellr                           |       Owner:
                                             |  abrightclearweb
     Type:  defect (bug)                     |      Status:  assigned
 Priority:  normal                           |   Milestone:  5.3
Component:  Administration                   |     Version:
 Severity:  normal                           |  Resolution:
 Keywords:  has-screenshots wpcampus-report  |     Focuses:  accessibility
---------------------------------------------+-----------------------------

Comment (by kjellr):

 I spent some time looking into that `select` field issue this morning, and
 it seems like the only way around this would be to use `-webkit-
 appearance: none` and add a custom dropdown arrow. I've attached
 [attachment:"47477.3.diff"], which tries this approach.

 This looks consistent in all browsers, and mimics the style of our
 buttons:

 [[Image(https://cldup.com/qmTYfO-oBe.png)]]

 It works well with text zoom. Here's an example at 300%:

 [[Image(https://cldup.com/s6ndRCxmwF.png)]]

 I was encountering an issue where our `max-width` rules for table header
 select fields were cutting text off horizontally in those fields.
 Converting those max-widths to `rem` units instead seemed to solve that,
 so this patch includes that fix as well.

 Note that with this approach, we'll need to sync up any changes here with
 button updates in #34904. Since this latest update changes the design of
 the `select` form fields, I'll add needs UI feedback for a gut check from
 other designers.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47477#comment:11>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform