Fix filename column width in responsive mode

[PVince81]

Description

Removed uk-width-small and now using the icon width for column
alignment. This gives more space in responsive mode for the file name
column.
Removed the "More" column header label which felt redundant.
Adjusted file actions button id to not mention size any more, now that
we only have a single size.

• Removed uk-width-small and now using the icon width for column
  alignment. This gives more space in responsive mode for the file name
  column.
• Removed the "More" column header label which felt redundant.
• Adjusted file actions button id to not mention size any more, now that
  we only have a single size.
• Share indicator column now always present even when indicators are not
  rendered, for consistency with the header.
• On resize, copy the table body row width to the header row to make sure
  that headers stay aligned when a scrollbar appears in the body as
  the scrollbar does not cover the header part as the latter is
  fixed/frozen on scroll.

Related Issue

Fixes #2998

Motivation and Context

How Has This Been Tested?

• manual test in responsive and regular mode to check file name column and also the column header alignment with column contents

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests

Checklist:

• Code changes
• Unit tests added
• Acceptance tests added
• Documentation ticket raised:

[kulmann]

very nice!

[PVince81]

@kulmann please recheck all, I've also added "flip: false" now to the new file menu after rebasing

[kulmann]

🚀

[kulmann]

When you are raising a ticket for this, add icon size classes as an idea. So oc-icon-width with the default icon width, then oc-icon-width-xsmall, oc-icon-width-medium, etc.

[PVince81]

Indeed I can just set "oc-icon" on the header div to get the width, done that now.

After rebasing on top of master and getting #1952, I have now a bigger alignment problem:
the header bar of the table has padding-small, but has no scroll bar. So we're missing some additional space on the right

So now I'd need to set the column width to 39px instead of just 24px to accommodate for that. The 24px only works fine when no scrollbar is here. I don't think I can detect the scrollbar width, and it would be hacky anyway.

With scrollbar:

Without scrollbar:

Any suggestions ? Would it be possible to have a fixed table header but still have the scrollbar pushing the layout ? @LukasHirt

Conditions have changed after rebase

[PVince81]

Idea: use JS to measure the width of the name column in the body (it's the one that expands as far as possible) and then apply the same with to the name column in the header. This would help align the column headers and is likely easier than trying to guess the scrollbar size.

Otherwise I'd wish for a way with CSS to tell the browser to not count the scrollbar as being part of the layout, like Mac OS does.

[PVince81]

It seems there used to be a value called overflow: overlay that would achieve the desired result, but it has been deprecated: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

[PVince81]

Seems we have an even bigger undiscovered problem: the share indicators column doesn't have a fixed width for neither the header nor the body... It seems we'd need the same calculation here as well.

[kulmann]

Seems we have an even bigger undiscovered problem: the share indicators column doesn't have a fixed width for neither the header nor the body... It seems we'd need the same calculation here as well.

@PVince81 what about calculating the width of #files-list-container and setting it as max-width on #files-table-header? So that you don't operate on column level, but instead just for the whole divs?

[PVince81]

I have an ugly but working solution now: copy all column widths from the table rows to the header to have consistent sizes.

@kulmann processing column-wise is necessary because of the share indicators column width which is not predictable when using extensions (it's not always just two icons). Adjusting the parent's width wouldn't be enough to help with header label alignments.

I'm unsure yet whether I'll want to merge this solution but please do have a look and let me know what you think. @LukasHirt @kulmann

[PVince81]

if this become a thing for more tables (at least the ones with RecycleScroller), we could consider wrapping all this ugliness into a separate vue component in the future...

[PVince81]

After some thought I think I'll still try the other solution of setting the width of the parent, the share indicator column is likely not relevant there.

• try approach about setting parent width

[kulmann]

See comments. Edit: lol, outdated. ^^

[PVince81]

@kulmann you were right, it seems to work fine! See last commit.

If all agree I'll squash.

There's a little UIKit bug I found while switching between multiple responsive mode: in some cases it seems UIKit is setting "uk-first-column" on the wrong column, here "Updated" which causes an additional top padding. I'd consider this unrelated but we could probably work it around later.

[kulmann]

@kulmann you were right, it seems to work fine! See last commit.

If all agree I'll squash.

There's a little UIKit bug I found while switching between multiple responsive mode: in some cases it seems UIKit is setting "uk-first-column" on the wrong column, here "Updated" which causes an additional top padding. I'd consider this unrelated but we could probably work it around later.

Yes, please squash. On mac this works fine. When you squashed I'll review again tomorrow, early in the morning.

[PVince81]

As discussed:

• squashed
• removed "flip: false" from the changeset as it caused weird menu positioning

[kulmann]

Awesome!

[PVince81]

I'll add a changelog entry for this as a bugfix since it did not make it into 0.4.0