formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Slider Overflowing #239

Closed petewins closed 2 months ago

petewins commented 2 months ago

Hi @blvdmitry, I found some quirks on the Slider and ActionBar over the week wanted to get your input on this. Will open a separate issue for the ActionBar

Describe the bug When the Slider's knobs are at the max and min, the Slider seems to cause the parent to overflow.

To Reproduce

  1. Create a slider inside a container with overflow set to auto.
  2. Move the knob to the max position
  3. Container will now overflow horizontally
  4. Moving knob away from max will remove the overflow https://codesandbox.io/p/devbox/slider-overflow-ggxmvn?file=%2Fapp%2Fpage.tsx%3A21%2C18

Expected behavior I'd expect the components to not overflow regardless of its positioning

Environment (please complete the following information):

Additional context When inspecting I believe this is due to the absolute positioning on the Slider knobs and extends past its box.

image
blvdmitry commented 2 months ago

Made it closer to the native implementation like you suggested, going to release a patch after I also address the other slider issue you've reported 🙌

https://github.com/formaat-design/reshaped/assets/887379/2602295f-1911-45da-876c-5cef98ec4ba2