Improper position of the progress throbber.

I have attached a patch for same, also added after patch screenshot for same. please review

After Patch

1. +++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
   @@ -640,6 +640,11 @@ td.group-title {
    .views-list-section {
   ...
   +  & .ajax-progress--throbber {
   

   This problem isn't specific to the views list, this bug could happen on any table that uses operations with ajax. The reason this is more prone to happen on the views list table is that it has a lot of columns and long description texts, making the operations column less likely to have additional space for the throbber.

2. +++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
   @@ -640,6 +640,11 @@ td.group-title {
   +    position: absolute;
   +    margin-block-start: 5px;
   

   It might be acceptable to use position: absolute but there might be better approaches. The key drawback with this approach is that when there isn't a lot of space (like on a narrow screen), the throbber might be pushed outside of the table.

This issue is due to a lack of space in the table columns; if the operations column width is not enough, then the progress throbber moves to the next line. I have checked other tables, like on the content page, where throbber comes next to operation links since there is enough space.

All the columns in the views page table have a width defined, which is added in the views UI module. So I changed the width of two columns in theme to provide enough space for the throbber icon, which then moved to the right side of the operations button.

CC failure in #4

In patch #4, I think we should not fix the width of table columns.

The ajax throbber has global styling which is working for all the tables. The reason for throbber coming to next line was due to the space issue that's why reduced the width of column in views table.
Updated the patch from #4 due to CC fail.

As highlighted by many before, there is a lack of space after the Edit dropdown to accommodate the throbber inline.
As it stays right now, the entire Edit dropdown field is 128px in width, of which 96px is the width of the dropdown element, 32 px is the width shared onto either sides of the dropdown.
To successfully include the throbber inline there needs to be at least 42px space after the dropdown, as that is the width the throbber takes.

To tackle this there are 3 approaches we can take,

1. Involves redistributing the width taken by the table header.
2. Involves redistributing the width taken by the table header, and
   2(a). reducing padding of the Edit dropdown element.
   2(b). reducing padding of the Edit dropdown element and reducing margin taken by ajax throbber.

1. Redistributing the width taken by the table header.

1. Reduce the width of View name table header from 20% to 15%.
2. In turn allocate the free space to Operations table header, increasing it from 10% to 15%.
3. Doing this increases the width of Edit dropdown from 96px to approximately 145px, consequently making enough space for the throbber.

Method 1 Plain View

Method 1 Calculated

2(a). Redistributing the width from the table header and reducing padding of edit dropdown.

1. This one takes ideas from patch-4, reducing the width of View name table header from 20% to 17%.
2. Allocating the free space to Operations TH, increasing its width from 10% to 13%.
3. Reducing the padding from TD of Operations TH, from 16px to 7px (or .45 rem ~ 7px)

Method 2(a) Plain View

Method 2(a) Calculated

2(b). Redistributing the width from the table header, reducing padding of edit dropdown and reducing margin taken by ajax throbber.

1. Reducing the width of View name table header from 20% to 17%.
2. Allocating the free space to Operations TH, increasing its width from 10% to 13%.
3. Reducing the padding from TD of Operations TH, from 16px to 10px (or .625rem)
4. Reducing the margin from ajax throbber from 12px to 9px (0.5625rem).

Method 2(b) Plain View



Method 2(b) Calculated

I faced a similar issue with the improper position of the progress throbber. After investigating, here’s how I fixed it:

1.CSS Fix
I inspected the element in DevTools and found conflicting styles. Adding the following CSS resolved the alignment issue: css

.progress-wrapper {
position: relative;
margin: 0 auto;
text-align: center;
}
.progress-bar {
display: inline-block;
}
@media (max-width: 768px) {
.progress-bar {
width: 90%;
}
}