Create sticky action buttons for table in Settings/User App

[JuliaKirschenheuter]

Html structure of the table has been changed for a11y purposes: https://github.com/nextcloud/server/issues/36921. During testing of new implementation some bugs regarding position: sticky and not right existing implementation of z-index of the action buttons have popped up. Demo:

There were 2 main problems:

1. During opening action menu of each row
2. During opening action menu of each row in editing mode

For the time reasons was decided to keep good / not broken state but without position: sticky which causes possible right scrolling inside of a table (from a11y perspective absolutely valid but not as user friendly as before), see https://github.com/nextcloud/server/pull/37870.

This is a follow-up ticket to correct action buttons to sticky position with current table implementation. There were some suggestions regarding implementation:

Current style was a bit incorrect:

• .userActions had z-index: 10
• .popovermenu had z-index: 110
• .userActions is a parent of .popovermenu
• A child cannot have z-index higher than parent

For position: relative we could just remove z-index: 10. But with position: sticky it works different... position: sticky always creates a new stacking context. It is possible neither to remove z-index from sticky parent, nor to make child with higher z-index...

If I'm not wrong, the only way to keep sticky here is to use another container for NcActions here. For example, #app-content. But > I am really not sure, it positions element correct with sticky...

For an experiment, try to set container prop of NcActions here to #app-content.

from https://github.com/nextcloud/server/pull/37860#issuecomment-1517710248

And:

Proposals regarding sticky + z-index issue:

Render NcActions outside the table row

• Props:

• I'd expect it to be easy to implement

  • Cons:

• Requires rewriting of some integration tests because row buttons will be outside of the row

  Generate progressive z-index - set each next row less z-index value

• Props:

• Keep the current structure

  • Cons:

• More complex implementation

• Not sure about performance and large tables

from https://github.com/nextcloud/server/pull/37870#issuecomment-1542634341

Please pay attention that integration tests possibly have to be adopted too.

[Chartman123]

@JuliaKirschenheuter I'm not sure if it's related, but in current NC27 I can't even see the action buttons if I enable further columns like "last login" or "user backend". They are then out of the viewable area and there's no horizontal scroll bar.

I can only see them when I click inside the text and mark it by moving to the right until they are viewable.