UI re-flow bug with project file tree ref / control elements

Summary

The following discussion from !22196 (merged) should be addressed:

• @wortschi started a discussion: (+1 comment)

  There's a little glitch between breakpoints 576px and 767px.

  project_controls

Steps to reproduce

See video in summary.

What is the current bug behavior?

Elements in tree ref flow and doesn't look great.

What is the expected correct behavior?

Elements should flow together and look consistent to the larger breakpoint views.

Possible fixes

Maybe we can stack the two containers (tree-ref-container and the tree-controls) on the tablet view so we end up with something like:

We could assign flex-sm-column flex-md-row to nav-block and then just and have the .tree-controls left aligned for this breakpoint.