Ember-inspector: Proposal: left column shrink on breakpoint

[ansmonjol]

Is your feature request related to a problem? Please describe.
Difficulties to make my window fit both application and ember-inspector while it's expanded on a small screen.

Describe the solution you'd like
I would love the left bar in ember-inspector to be automatically shrink on some conditions.

Describe alternatives you've considered
Want to shrink the left sidebar bellow a certain devtools width
AND
When inspectorExpanded is true (while digging into a data row attributes for example c.f. screenshot 1)

Additional context
The breakpoint to shrink the sidebar would be 885px (750+135)
I chose this one regarding the width when Chrome devtools moves the CSS section from the bottom to the right of the devtools container (750px) in Elements section.
And the hidden part of the sidebar that will be visible again after 750px in ember-inspector section (135px).

I would also love to have another breakpoint when the inspector is fully expended (inspectorExpanded === true) and if the ember-inspector width in below 1125px. I have chosen this width regarding the situation where I can have 3 data columns displayed and the inspector fully expended.

Also, we should not forget to add a title to the sidebar section links so we can find the section name while hovering the icons.

We can directly interact with the first Ui::DraggableColumn in application.hbs.

And I would be very happy to do it !

Future possibilities
Some other ideas for the future.

I was wondering if you guys have ideas regarding making ember-inspector fully responsive or make a full redesign of it.

[rwwagner90]

@nummi recently mocked up a collapsed column and some new ideas around responsive design. Please feel free to work together on a solution here 😄

[nummi]

Here are the latest mockups:

[ansmonjol]

Awesome ! Let me know how I can help.
I'm on discord with the same name if you want.