Clean up display of image field on comment form

Some css rules of node and comment wrapper are intefering in this field.

core/themes/bartik/css/components/form.css

The float left in:
.comment-form label {
float: left; /* LTR */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.929em;
width: 120px;
}

The margin-left in:
.comment-form .form-item .description {
font-size: 0.786em;
line-height: 1.2;
margin-left: 120px; /* LTR */
}

core/themes/bartik/css/components/field.css

The float left in:
@media all and (min-width: 560px) {
.node .field--type-image {
float: left; /* LTR */
margin: 0 1em 0 0; /* LTR */
}
[dir="rtl"] .node .field--type-image {
float: right;
margin: 0 0 0 1em;
}
.node .field--type-image + .field--type-image {
clear: both;
}
}

Updated issue summary with clearer screenshots.

I have fixed it for the comment section and attaching the screenshot for reference.

Thanks for the patch!

+++ b/core/themes/bartik/css/components/form.css
@@ -280,7 +283,7 @@ input.form-submit:focus {
+  /*margin-left: 120px; /* LTR */

We don't want to comment out any CSS, if this style isn't needed then it should be removed. (I haven't tested manually to see if the style is needed in any other contexts.)

Also LTR means that there is a corresponding RTL style for this that also needs updating.

Removed "/*margin-left: 120px; /* LTR */" css.

Worked on #10.
#10 work fine with LTR style but not with RTL style also attached screenshot for the reference.

Re-rolled patch #12 in 9.2.x and applies cleanly and works as intended.

Confirmed. 2624336-12.patch fixes issues on both Drupal 9.1 & 9.2.

🛠️ Fix Drupal 9.1
- Add "image" field to comment type: '/admin/structure/comment/manage/comment/fields'
- Layout is "correct" in Seven (admin) theme
- Layout is "incorrect" in Bartik (frontend) theme
- Apply patch: `2624336-12.patch`
- Clear cache: `drush cr`
- Layout is correct (see screenshot drupal-9.1_with_2624336-12.png)

🛠️ Fix Drupal 9.2
- Add "image" field to comment type: '/admin/structure/comment/manage/comment/fields'
- Layout is "correct" in Seven (admin) theme
- Layout is "incorrect" in Bartik (frontend) theme
- Apply patch: `2624336-12.patch`
- Clear cache: `drush cr`
- Layout is correct (see screenshot drupal-9.2_with_2624336-12.png)

@guilhermevp You didn't include an inter-diff and when I checked your patch (2624336-14.patch) it appears to be the same as 2624336-14.patch. Did you upload the right one?

Sorry @tyler36, it is indeed exactly the same I forgot to NOT upload the patch and just describe that this patch works the same in 9.2.x version.

Patch #12 applied cleanly and it is working well. Below Screenshot for reference.

Before patch:

After patch:

This change affects other fields on the comment form - for example an email field with description text.

Before

After

I think the problem is that the image field in a comment should not be floated. I think actually all this CSS

@media all and (min-width: 560px) {
  .node .field--type-image {
    float: left; /* LTR */
    margin: 0 1em 0 0; /* LTR */
  }
  [dir="rtl"] .node .field--type-image {
    float: right;
    margin: 0 0 0 1em;
  }
  .node .field--type-image + .field--type-image {
    clear: both;
  }
}

can be removed. It only exists for comments and is not working. We'd need to check quickedit is not affected (a quick test shows this css is not part of that either). Note this CSS is not in play at all when editing a node with Bartik as the theme.

Applied patch #12 applied successfully and looks good for me
Thanks for the patch

Applying the patch for 9.4.x and 9.5.x and adding a reroll file for #14 and also considered the the suggestion of #19 and updated some css part for the label/description that is not aligned correctly with the available field. i've not added a reroll for 10.1.x as not sure because bartik theme is not there in version 10 and not having the available file, I have tested locally it working fine for me so please review.
Attaching the before and after screenshots for the reference.

Test patch #26 for 9.4.x version.Patch is applying successfully and it is working well.
check Screenshot for reference.

Applied patch in #26 successfully in 9.4.x. The patch places the button down and also fixes the issue mentioned in #19. Adding screenshots for reference.

Already work fine without applying any patch.

Thank you for working on this but tested on Drupal10.1 with a standard install, which uses olivero theme and I no longer see this issue. Moving to bartik theme.

I have Tested the patch #26 on Bartik Theme on D.10, patch is not applying on this, Issue still exits on Bartik Theme

Hi ifrik,

Applied patch #26 for the 9.5.5 version on Bartik Theme and the patch is applying successfully and working well.

See the attached screenshots for reference.

Please put the patch into an issue fork and merge request.

working on this.

Created a MR for the fix, can confirm that the changes work. Attaching the screenshots, Please review!

Hi,

I have applied the latest MR !14 to the Bartik theme with 1.0.x-dev and confirmed MR is applied successfully and working as expected.

Please see the attached files for reference.

I'm moving this now to ‘RTBC’.

Thank you!

This changed has lead to a bug: #3560122: Unwanted margin-left introduced for forms help text

Here is the patch to remove description margin for contributed theme bartik version 1.1.x

Is the patch in #46 a fix to the issue mentioned in #45? If so, please put the patch into a merge request on that issue.