Stop add-on Draggable from overlapping the vertical scrollbar when stories overflow

[LucaCras]

Issue: #17202

fix the draggable overlaying the vertical scrollbar when stories overflow at the bottom, making the story un-scrollable.

What I did

There was a negative margin on the Draggable component that is responsible for resizing the add-on panel when in side-panel mode.
This margin pushed the Draggable to the left by 10px, which caused it to overlap with the vertical scrollbar for scrolling down a long story.

I have removed this margin, which puts the Draggable in the correct spot.

Below is an image illustrating the old- (yellow) & new (blue) positions.

Schermopname.2022-03-16.om.16.16.38.mov

How to test

1. Create a story that overflows on the bottom.
2. View the story.
3. Try to scroll down with the right-hand scrollbar. (should be able to use the entire width of the scrollbar)
4. Try to resize the add-on panel in side-panel mode. (should be at the correct position, not overlapping anything)

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit e962b47. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[yannbf]

hey @LucaCras thanks a lot for your contribution! There's a minor detail (which we discussed in triage) so let us know if you can revisit that and if you ever want assistance feel free to ping!

[MichaelArestad]

I am happy to help with anything design-related. I could do some ideation and propose a few things if you prefer.

[LucaCras]

Hi @MichaelArestad, I have made a change that fixes the shadow to show up on the left side, instead of right, I have uploaded a video in the original message. Can you check if this works? I have also added a 1px margin, so there is no overlap between the iframe and the panel / draggable handle

[MichaelArestad]

@LucaCras This is quite nice. Nice work!

[LucaCras]

@LucaCras This is quite nice. Nice work!

Thanks! Is there anything else I need to do @MichaelArestad?

[MichaelArestad]

@LucaCras I don't think so. This is just awaiting merge.