Just use the BoxLayout instead of trying SingletonLayout.

The BoxLayout positions its children, so size information propagates up and down. See https://github.com/phosphorjs/phosphor/issues/340 for more details.

In particular, I was seeing issues with using SingletonLayout in the editor, where the codemirror editor was not understanding it was inside a small window and needed to have scrollbars.

packages/docregistry/src/mimedocument.ts

@@ -50,8 +50,6 @@ class MimeContent extends Widget {
     this._context = options.context;
     this._renderer = options.renderer;
 
-    // TODO: Use SingletonLayout when a new version of phosphor is released. See
-    // https://github.com/phosphorjs/phosphor/issues/337
     const layout = this.layout = new BoxLayout({ spacing: 0 });
     layout.addWidget(this._renderer);
     BoxLayout.setStretch(this._renderer, 1);

packages/fileeditor/src/widget.ts

@@ -176,12 +176,6 @@ class FileEditor extends Widget {
     context.pathChanged.connect(this._onPathChanged, this);
     this._onPathChanged();
 
-
-    // TODO: Use SingletonLayout when a new version of phosphor is released. See
-    // https://github.com/phosphorjs/phosphor/issues/337. Be careful: using a
-    // PanelLayout results in the CodeMirror scrollbar not working, and even if
-    // setting the overflow to auto, the codemirror scroll-past-end doesn't
-    // work.
     let layout = this.layout = new BoxLayout({ spacing: 0 });
     layout.addWidget(editorWidget);
     BoxLayout.setStretch(editorWidget, 1);