fix: remove double scroll bar in studio edit modal

[navinkarkera]

Description

Bug description:

Currently, when editing the AI block in the studio, the editing area has its own scroll bar independent of the one containing the block's edit view. This can create a scenario where someone scrolls down with the scroll wheel and hits the apparent bottom even though there are additional settings available.

The addition of .ai-eval-studio-scroll class to inner content caused double scroll when modal already has scrolling support.

But the modal for some reason doesn't scroll in fullscreen mode, so I had to add the class conditionally based on modal- fullscreen class.

However, we cannot use css directly due to shadow-dom which doesn't detect parent dom's classes, so we check the class using javascript and toggle a data attribute using mutation observer and apply the class depending on the data attribute.

Note: This could be an upstream issue which I did not test yet.

Should be fixed in openedx/openedx-platform#38859

Supporting information

• Private-ref: https://tasks.opencraft.com/browse/FAL-4368
• Depends on: fix: add scroll to modal content when fullscreen openedx/openedx-platform#38859

Testing instructions

Verify the bug is fixed. Test in both normal and fullscreen mode.

Other information

Include anything else that will help reviewers and consumers understand the change.

• Does this change depend on other changes elsewhere?
• Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.

[Kelketek]

@navinkarkera I think your assessment that this is an upstream bug may be correct. It seems especially weird that we need to worry about it like this, and hack around to solve it in this manner.

[Kelketek]

@navinkarkera The client is currently on Ulmo. Since the bug is on Ulmo, does this fix need to be deferred until they upgrade to whatever is after Verawood, lest it break things for them today?

[Kelketek]

Actually, just realized we could put it in our fork, and solve it that way. Duh.

[Kelketek]

@navinkarkera It does look like the second scroll wheel is gone. Thank you!

I did notice, however, that the footer has a bunch of extra space. Here's what it looks like for me:

By comparison, here's the HTML block:

Could you take a look at this?

[navinkarkera]

@Kelketek The html block opens up native react modal and doesn't need iframe for the editor to work. But in this case, the modal has its own default actions bar but the xblock implements its own action bar inside modal body. I'll investigate why it is so and if we can remove the empty space occupied by modal-actions.

[navinkarkera]

@Kelketek I just pushed a change in edx-platform which fixes the empty space while still showing modal-actions if required.

[Kelketek]

@navinkarkera This is working for me now, thanks! Please don't merge it yet, though-- I'll do so before coordinating with EduNext on their next deployment so it goes smoothly with the transition to our branch (they're currently using upstream) and then we can get the backports to there.

[Kelketek]

@navinkarkera This should be safe to merge after all since we don't need to backport to Ulmo, right?

[navinkarkera]

@Kelketek Yes. We don't need to backport edx-platform PR.