Studio's fullscreen button covers the ORA editor's Settings tab and swallows its clicks

[ihor-romaniuk]

Description

In Studio, the XBlock editor modal floats a fullscreen ("expand") button over the top-right corner of the modal. The ORA editor hides Studio's modal header (an inlinedisplay: none on .modal-header) and reuses that strip for its own tab bar, so the button lands on top of the last tab - Settings - and intercepts clicks meant for it.

Clicking Settings toggles the modal to fullscreen instead of opening the tab. The tab is reachable only by hitting its left edge, or by going fullscreen first.

Only the ORA editor is affected. Every other XBlock editor keeps Studio's modal header, and the button sits inside it with nothing underneath.

Steps to reproduce

1. In Studio, open a unit that contains an Open Response Assessment component.
2. Click Edit on the ORA component.
3. Click the Settings tab - the last one in the tab bar.

Expected: the Settings tab opens.

Actual: the click hits the fullscreen button, the modal expands, and the Settings tab does not open.

Screenshot

The fullscreen button sitting on top of the Settings tab:

Scope

• Studio only; the LMS is not affected.
• Reproduced on master.
• LTR locales. In RTL the tabs pack to the left and the button stays on the right, so they do not meet.

Proposed fix

Reserve the width of the button on the right edge of the ORA tab bar - Studio's own geometry, right: 30px plus the button's width: 44px, from cms/static/sass/elements/_modal-window.scss - so the last tab ends before the button starts. CSS only, no change to the editor's behaviour.

Pull request: #2443

[ali-hugo]

Hi @ihor-romaniuk,

Thanks for working on this fix. Quick question: any idea why I'm not seeing the fullscreen button on my side? I tried on a number of different browsers: