Issues with some interactions

[Lawful2002]

Describe the bug

1. [Fixed] The image region selection interaction is not selecting the 'proper' region when we hover over it on some screen sizes.
2. [Fixed] In the shape creation interaction, the options (add edge, delete etc.) are overlapping the actual region for creating the shapes, making it difficult to use. Also on mobile devices the header hides the interaction area.
3. Console errors while using Music Interaction
4. The end card has weird UI

To Reproduce Steps to reproduce the behavior:

1. Go to link
2. Play through the interactions on mobile

Screenshots / Videos

https://user-images.githubusercontent.com/73544247/179406073-d5d66293-70c4-442a-91fa-e1a963f68558.mp4

[kevintab95]

Hi @Lawful2002, would you be able to look into this?

[vojtechjelinek]

@SanjaySajuJacob Any update on this issue?

[vojtechjelinek]

@Lawful2002 I'm not able to replicate the third screenshot and also I don't see a screenshot for "The end card has weird UI"

[vojtechjelinek]

Moving this to hotlist as all of these also occur on Oppia.org, but I will still be fixing some of these.

[kevintab95]

Hi @Lawful2002, can you add a screenshot for (4) please? Thanks!

[Lawful2002]

@kevintab95 Done

[kevintab95]

Thanks @Lawful2002! Hm, I'm not sure what is weird about the UI in the end card except for the overflow of text in the middle card. @nithinrdy could you please check if this works as expected (asking since we changed the UI for the end card recently)?

[nithinrdy]

@nithinrdy could you please check if this works as expected (asking since we changed the UI for the end card recently)?

The layout of the cards themselves is correct, although, like you pointed out, the overflowing text is an issue. I'll get to it soon as I get the time.