Twenty Seventeen, Twenty Nineteen & Twenty Twenty-Two: Comments Reply heading and Cancel reply link have no space between them

[pitamdey]

In Theme Twenty Nineteen, Twenty seventeen & Twenty Twenty-Two, in the comment section on clicking reply the reply to user and cancel reply have no space between them
Reference Video : ​https://drive.google.com/file/d/1YBcQquFQdZz7CpUZs3gzYBfK869CTWDB/view

[pitamdey]

Twenty Seventeen

[pitamdey]

Twenty Nineteen

[pitamdey]

Twenty Twenty-Two

[pitamdey]

After applying this solution the issue is resolved

[himshekhar07]

Patch added

[sabernhardt]

This might be fixable by adding a space in the comment reply JS instead (#51589), but you proposed changing theme styles.

Notes:

• Twenty Seventeen uses em measurements for most margins. Its margin for could go in the ​comment-reply area of the stylesheet.
• Twenty Nineteen likewise could use 0.5em (or 0.5rem) as a margin. That theme's styles need to be edited in ​SCSS and then compiled.
• Twenty Twenty-Two only needs a correction in the legacy version of the Comments block; the ​newer block adds a margin of 0.5em. To avoid RTL issues, we could try a pseudo-element before the small element.

  .wp-block-post-comments .comment-reply-title > small::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
  }
  

[poena]

Hi,
@pitamdey can you please clarify if you mean the comments block, or the theme's default comment area?

It would be helpful to add testing instructions, both for reproducing the problem and for testing the patch.

[pitamdey]

Hi, @poena... Its the theme's default comment area.

• Twenty Seventeen: add a 0.5em left margin in style.css and then override that with a 0.5em right margin in rtl.css
• Twenty Nineteen: add a 0.5em left margin in sass/site/primary/_comments.scss and style.css, which becomes a right margin in style-rtl.css
• Twenty Twenty-Two: add a ::before pseudo-element that is 0.5em wide

Trac 59334