move Dash 3.0 dev tools into footer

[gvwilson]

Move the dev tools into a footer.

• closes Dev UI Dash 3 #3200
• may close Devtools UI can block UI elements in bottom corner #3210

[ndrezn]

@BSd3v @AnnMarieW @CNFeffery we're evaluating this issue but not treating it as a release blocker for Dash 3.0, so we won't be making this update for the major release.

We looked into updating to the footer instead and internally we're in favour of that change, but we ran into some gnarly edge cases looking at a quick implementation (e.g. when the Dash app is intended to take up 100vh).

We'll follow up with this in more detail in a patch release (e.g. 3.1).

[AnnMarieW]

Thanks for the heads up. If the footer does't work, then the option to minimize it would be my second pick.

[BSd3v]

Oy vey...

Why cant it just revert to before the adjustments and roll the whole thing out in 3.1?

[ndrezn]

@AnnMarieW There are also some gnarly edge cases with minimizing it; with the new version notification we need to display two notification digits, show the new version number... it's a bit much to squeeze in and not worth delaying the release. Though it's on the table!

@BSd3v we don't think the overlay is significant enough to roll back/delay the release (which is why we went forward with the design initially 🙂).

[BSd3v]

There is a notification right here that you cant see:

This is it in 2.18.2:

[CNFeffery]

It would be perfect if it could expand/collapse like in previous versions.

[gvwilson]

@CNFeffery apologies for reaching out this way but I couldn't find a contact email address for you - if you'd like to be part of a deeper discussion about this and related matters, could you please email me ([email protected]) so I can include you? thanks - @gvwilson

[CNFeffery]

@gvwilson @BSd3v @ndrezn I found some reference material that can be leveraged, such as the developer tool controls integrated in react-scan. Developers can freely adjust approximate anchor positions using the mouse, and interactively expand/collapse elements:
demo URL: https://react-scan.com/