Display of the drop-down list of operations with 2 or 3 items in the table is not looking good.

Fixed the dropbutton dropdown list operations styling issue. Please review the MR.

The list operations is being hidden because of css property of dropbutton class .dropbutton .dropbutton__items is set to position: absolute and the

table tr:not(:first-of-type):nth-last-child(2) td .dropbutton__items,
table tr:not(:first-of-type):last-of-type td .dropbutton__items

is setting the bottom: 100% property which breaks the design for all the Operation lists menu in views, content type.

Like the feedback given in 🐛 Improved Accessibility: Unveiling Dropbutton Operations Hidden by Gin Table Scroll Wrapper Closed: duplicate this doesn't seem like the solution as it will lead to other issues.

So moving this back to needs work.

@saschaeggi, the dropbutton issue occuring only due to this class

table tr:not(:first-of-type):nth-last-child(2) td .dropbutton__items,
table tr:not(:first-of-type):last-of-type td .dropbutton__items

css property of bottom: 100%. If we change this property to bottom: auto the issue can be resolved and it's not breaking the design of other dropbutton in the theme.

Hi,
I have tested MR !377 on Drupal version 10.2.2
MR applied successfully...

Testing steps:

1. Install Drupal 10.2.2
2. Install and set the Gin theme
3. Create a view with Table format and add fields
4. Check for the Operation dropdown for the several elements (able to reproduce the issue successfully)
5. Apply the patch and check again for the same

Test Result:
The Operation dropdown with several elements not breaking, looks good to me

I have checked for the content type operation dropdown it's also broken before but after the patch, it's also fixed and looks good.

Attaching screenshots for reference.

Sharing my testing results only, its code already needs work state

Hi,
I have tried to reproduce the issue locally on Drupal 10.2.5 instance, and looked for the style breaks mentioned on the issue summary. But I couldn't find any style break on views section, checked all dropdowns related to view, but as @Kanchan Bhogade raised a concern that he was encountering style break on the CT section, so I looked for the same, and the style break was there, which starts occuring from the 2nd CT.
I've applied MR !377 provided by @Tirupati_Singh, the patch gets applied successfully and the issue regarding the style break on CT gets solved by it and as there were no style breaks detected on the views section, it looks to be remain unchanged with no extra style breaks are occuring on views section after applying the patch.

Attaching all the screenshots here for reference.

Also the MR looks fine to me, so moving it to RTBC++.

As mentioned in #6, deleting styles is not the best solution. So I dove into this topic a bit and tried to solve it.

I tried to solve it with styles, but I was able to reproduce quite a few cases that the styles did not cover.

I added a js file that covers most of the cases (using different layout densities, row position in the table, and number of elements in the options).

May need to add some comments for clarity, and also test if the js for views works when filtering

Closing this as we implemented a different solution in 🐛 gin-table-scroll-wrapper hides drop down options if they expand beyond container Fixed