[KED-2988] Fix for plotly when escape button pressed

[rashidakanchwala]

Description

Jira Ticket - https://jira.quantumblack.com/browse/KED-2988

Development notes

Besides fixing the bug, I have also raised z-index for plotly modal so it comes on top of the global toolbar.
Update - Plotly Modal when expanded will show the global toolbar on the left so users can access settings/themes while viewing the modal (use-case - if they want to switch between light/dark theme while viewing the charts)

QA notes

Steps to produce the bug --

Run shuttle factory with Kedro-viz --> Click on node Uplift Report Figures' -- > Expland plotly chart --> Press escape

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[tynandebold]

Great work! Just two small things and then we're good :)

[tynandebold]

Given we now have a global toolbar, that toolbar should almost always be visible.

With that in mind, I think we should keep the z-index at 3 and then bump over the the left value to 80px, since that's the width of the global toolbar.

There's actually a SCSS variable you can use for this here.

[tynandebold]

Works like a charm :)

I've left one small comment and I'll approve now. Great work.

[tynandebold]

I would suggest changing this hard-coded value to the variable we have set in the variables file, like we do here.

[limdauto]

LGTM just a minor comment

[limdauto]

you can potentially move this check to line 18 and short circuit there. IMO it's cleaner that way.

if (!visible.plotModal || metadata?.plot) {
    return null
}

[tynandebold]

Optional chaining for the win. Forgot this also works in vanilla JS, not just TS.

@rashidakanchwala I agree with Lim here. This is cleaner.