[wp-trac] [WordPress Trac] #57542: Twenty Twenty-Two: Label text alignment issue in comment form

[WordPress Trac]

#57542: Twenty Twenty-Two: Label text alignment issue in comment form
-------------------------------------------------+-------------------------
 Reporter:  patelhitesh                          |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Bundled Theme                        |     Version:  6.5
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch 2nd-       |     Focuses:  css
  opinion                                        |
-------------------------------------------------+-------------------------
Changes (by makdiahussain):

 * keywords:  has-screenshots has-patch => has-screenshots has-patch 2nd-
     opinion
 * version:   => 6.5


Comment:

 I've reviewed the issue regarding the label text alignment in the comment
 form for the Twenty Twenty-Two theme. After examining I also found that
 label text within the comment form is not aligned properly when the
 comment box area is large.

 [Screenshot](https://snipboard.io/lVKXsn.jpg)

 So we can replicate the behavior of the wp-block-post-comments-form
 stylesheet from Twenty Twenty-Three in Twenty Twenty-Two, we can add
 custom CSS to achieve the desired styling. Here's how we can do it:


 {{{
 /* Custom CSS to stretch the comment form field to full width */
 .comment-form {
     display: flex;
     flex-direction: column;
 }

 .comment-form label {
     margin-bottom: 8px;
 }

 .comment-form input[type="text"],
 .comment-form input[type="email"],
 .comment-form textarea {
     width: 100%;
     padding: 8px;
     margin-bottom: 16px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }

 .comment-form p {
     margin-bottom: 16px;
 }

 .comment-form .comment-notes,
 .comment-form .comment-form-author,
 .comment-form .comment-form-email,
 .comment-form .comment-form-url {
     display: flex;
     flex-wrap: wrap;
 }

 .comment-form .comment-form-author label,
 .comment-form .comment-form-email label,
 .comment-form .comment-form-url label,
 .comment-form .comment-form-comment label {
     flex: 1 0 100%;
 }

 .comment-form .comment-form-author input,
 .comment-form .comment-form-email input,
 .comment-form .comment-form-url input,
 .comment-form .comment-form-comment textarea {
     flex: 1 0 100%;
 }

 .comment-form .comment-form-author,
 .comment-form .comment-form-email,
 .comment-form .comment-form-url {
     margin-bottom: 16px;
 }

 }}}

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