Punch button should overflow to the right

[thamara]

Punch button should overflow to the right, filling up the gap between the button and the scroll bar. Still, the scrollbar needs to be on top of the button when in the bottom of the page.

[ccsCoder]

Do you think we should make the Punch Time button a little less prominent in terms of Width / and centre it ?
The reason I'm suggesting this is that it may lead to a lot of accidental taps / touches. Especially if it has a scrollbar on top of it .

While UX wise it is good to have large interact-able targets, this one may result in a lot of accidents.
Btw, is this action "Undoable" ?

[thamara]

That's a very valid point, but I have a feeling that having it smaller would be a little strange. I think usually people don't grab the scrollbar right on the bottom or use the drag feature of the scrollbar as much, preferring usually the mouse/trackpad movement (totally based on my experience, not sure how much this is true).

The action is Undoable, but this means that the user would need to go over the last punched entry and erase it manually.

[ccsCoder]

Makes sense. Please feel free to assign this to me 👍

[thamara]

Thanks!

[ccsCoder]

I investigated this.
The reason for the gap is that the Scrollbar is Actually appearing on the body and it automatically reserves 10px for the scrollbar.
Ideally, the scrollbar should appear on the container holding the table.

[ccsCoder]

This one is tricky.
Increasing the width is Not a solution because the browser Always leaves room for the scrollbar.
Trying to style scrollbars differently isn't flexible enough to target the right portion of the button.

The proper solution would be to change the layout around, but that's not trivial at this point.

Can we settle for something like this where the button is not 100% wide, but has some left / right margin ?

[thamara]

I really thought that was one of those one-line changes hahahahha
Thank you for investigating this.
I think this slightly narrow button looks good. It doesn't affect the overall feel but solves the little issue of the scrollbar meeting the button edge.
Unless this becomes extremely weird in one of the other themes (which I doubt), it's a go from me.

[ccsCoder]

I've also made the scrollbar a little thinner. i.e width: 5px, height: 5px to leave some room around the right side of the button.