Master Detail Breakpoint Ignored if using app.views.create

I have been using the kitchen sink example and have a basic set-up with a master-detail view. This works fine: https://codepen.io/pconkie/pen/rNLjQaa. It uses a standard link to load the master page and the breakpoint is observed.

However I will need to send logged in users to this page using JavaScript. As soon as I take out the view-init and handle this in app.js with:

var mainView = app.views.create(".view-main");
mainView.router.navigate("/projects/");

the page works, but is no longer split master / details on screens wider than the breakpoint.
https://codepen.io/pconkie/pen/MWepKbp
Why is this?