Feedback Widget Causes Horizontal Scrolling

[ArianHamdi]

Feedback Widget Causes Horizontal Scrolling

[ArianHamdi]

Hi @pettinarip,

Thank you for taking the time to check this issue.

I agree with you, and I think resolving the root problem is better.

I tried your idea for fixing this, but it didn't work the way I expected. When applying the transform to children instead of sticky parent, it still causes a scrollbar.

This was a bit tricky, and I found two solutions for this bug.

Solution 1:
Move the widget to the left side of the area and bring it back to the right side using the left property. In this scenario, hovering over it won't cause a scrollbar to appear.

You can see the changes here: solution 1.

Solution 2:
Apply transform-origin: right bottom. In this scenario, when hover occurs, the widget element gets scaled up from the left and the upper side and doesn't cause a scrollbar. In this solution, the hovering animation is a bit different.

You can see the changes here: solution 2.

Whichever solution you think is more acceptable, I can create a PR with that implementation.

[pettinarip]

Thanks for creating this issue @ArianHamdi

I saw your PR but I think we need to tackle the root problem instead of hiding the overflow.

So, the feedback button is using position: sticky and we are making it bigger on hover, generating a bit of overflow because the same sticky element is the one that is growing.

I think we need to separate those 2 things. The position should be in one element and the scaling in another (the button).

So, IMO:

• we'd need a wrapper around the button and the content of the popover
• then, make this wrapper as position: sticky (not the button)
• with that in place, we can transform the inner button as we were doing

LMK what do you think.

[pettinarip]

@ArianHamdi awesome! thanks for sharing this. Both solutions work great, I think the 1st solution works well while keeping the same animation. So, I'd go with that approach.

[ArianHamdi]

@ArianHamdi awesome! thanks for sharing this. Both solutions work great, I think the 1st solution works well while keeping the same animation. So, I'd go with that approach.

@pettinarip Thanks!
I opened a PR with first solution implementation: #12052