Go to content page admin/content
Edit any content for exp: /node/19/edit?destination=/en/admin/content
Now at bottom, we have Delete button, when we click on the delete button, we have spacing inconsistency.
Add margin-inline-start: 0; on .action-link link as well.
.js .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
.js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
margin-inline-start: 0;
}
| Comment | File | Size | Author |
|---|---|---|---|
| #11 | 3384071 after MR testing.png | 36.04 KB | Harish1688 |
| #11 | 3384071 before MR testing.png | 36.64 KB | Harish1688 |
| #11 | 3384071 before MR testing media.png | 34.74 KB | Harish1688 |
| #10 | Screen Recording 2023-09-04 at 8.26.43 AM.mov | 12.93 MB | gauravvvv |
| #8 | Screenshot 2023-09-01 at 6.48.37 PM.png | 125.78 KB | gauravvvv |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !4670
Comments
Comment #3
gauravvvv commentedComment #4
snehal-chibde commentedhello, This is not replicated on Drupal 11 Claro theme.
Can you please provide any more details how this gets replicated?
Comment #5
yash.rode commentedHi @Gauravvvv, can you please provide steps to reproduce so that someone can confirm this and get it fixed.
Comment #6
gauravvvv commentedI added the issue summary earlier, somehow it got removed. I have added it again.
Comment #7
yash.rode commentedI followed steps to reproduce with Claro theme, the throbber is spaced right for me.
Comment #8
gauravvvv commentedSo the spacing with action-link button is 24px, but it should be 12px as with other buttons.
With other buttons, if we have margin-right, then we don't have margin-left on the ajax progress icon. But in case of action-link, we do have margin-right on the button and we have margin-left on the ajax progress icon also. So the margin left 12px is extra spacing here.
I have added few screenshots for better understanding.
Comment #9
smustgrave commentedAlso followed the steps and not seeing the issue.
Comment #10
gauravvvv commentedI have added a screen recording as well.
In the first button, "Add Media" we have margin-right to the button and we don't have any margin-left on the ajax-progress-icon.
In the second button, "Delete" we have margin-right on the delete button additionally we have margin-left on the ajax-progress icon. That extra margin-left is the issue.
Hope it is clear now.
Comment #11
Harish1688 commentedHi,
As pr comment #10, Tested the MR !4670 for the issue spacing inconsistency in AJAX progress icon with action button
(spacing between button and loader right side). found the issue on local and tested the solution given in MR, it's resolved the issue. images attached for references.Testing Ste
1. Drupal 11.x setup and go to content page admin/content, Claro set as backend theme
2. Edit node type (Article), click on the delete button, and media button found the issue ( it's 24px, but it should be 12px).
3. Moved the MR and verified the solution, it's working fine.
Media loader spacing
Delete loader spacing Before
Delete loader spacing After patch
Looks good for RTBC+
Comment #12
smustgrave commentedPer testing in #11 going to see what committers think.
Comment #16
nod_Committed 513a31b and pushed to 11.x. Thanks!