[wp-trac] [WordPress Trac] #59958: Twenty Twenty: Search block is not looking proper when large size is chosen (was: Twenty Twenty theme - search block is not looking proper when large size is choosen.)

[WordPress Trac]

#59958: Twenty Twenty: Search block is not looking proper when large size is chosen
------------------------------+------------------------------
 Reporter:  nidhidhandhukiya  |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Bundled Theme     |     Version:
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:
------------------------------+------------------------------

Old description:

> Steps to reproduce the issue :-
> 1. Activate Twenty Twenty theme.
> 2. Choose serach block.
> 3. Now change the size to large or xl
>
> You can able to see that editor side the design not looks proper.
> I have attached video for better understanding.
> Video URL :- https://share.cleanshot.com/CDtNRZcsTTfHClvrPfhR

New description:

 Steps to reproduce the issue :-
 1. Activate Twenty Twenty theme.
 2. Choose search block.
 3. Now change the size to large or xl

 You can able to see that editor side the design not looks proper.
 I have attached video for better understanding.
 Video URL :- https://share.cleanshot.com/CDtNRZcsTTfHClvrPfhR

--

Comment (by sabernhardt):

 In the iframe editor, the `line-height` for the Search label is too small
 when the text is large.

 This shows multiple issues, which include:
 1. The Search block in the iframe editor inherits a `line-height` of
 `1.4em` from `wp-admin\css\common.css`. Before the editor was in an
 iframe, the label had a normal `line-height` from `:where(.editor-styles-
 wrapper) { line-height: normal; }` in `block-library/reset.css`.
 2. The `line-height` in the admin styles probably should be unitless
 (#44643).
 3. Twenty Twenty's button styles do not apply to the Search button within
 the editor (with or without the iframe).
 4. In the Extra large example (and possibly others in different
 languages), the text of the Search button extends outside its borders.

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