Calculate viewport dimensions from the scope-app div

[fbarl]

Fixes #2472 by calculating the viewport dimensions from the scope-app div bounding rectangle instead of window.width & window.height (the changes were pulled out from PR #2420).

[fbarl]

@foot PTAL

[foot]

I don't think this fixes #2472 anymore. Tested with service-ui@master:

SERVICE_HOST=frontend.dev.weave.works PROXY_SCOPE_COMPONENT=1 SCOPE_PATH=/Users/simon/weave/scope npm start

I (think) I can still fix this by fiddling w/ the height though, what problems did you have with it?
This is the change I made (done inline as scss doesn't work w/ PROXY_SCOPE_COMPONENT for now).

diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 6977c0f1..19eddfdc 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -151,7 +151,7 @@ class App extends React.Component {
     const isIframe = window !== window.top;

     return (
-      <div className="scope-app" ref={this.saveAppRef}>
+      <div className="scope-app" style={{height: 'auto'}} ref={this.saveAppRef}>
         {showingDebugToolbar() && <DebugToolbar />}

         {showingHelp && <HelpPanel />}

[fbarl]

Ups, I forgot to update the description, sorry for that. Basically this PR is only the first step towards fixing it, the second being adding a line or two to service-ui stylesheets.

What I suggested in #2473 (comment) was to add height: calc(100% - #{$top-toolbar-height}) but your height: auto would also work and it's more elegant, so I'd go with that.

The fact remains that it needs to be added in a separate PR, so I think I'll just do it when updating Scope UI (later today).

[fbarl]

@foot Mea culpa again, your height: auto solution in Scope stylesheets works fine, so nothing needs to be added to service-ui stylesheets, this PR alone should resolve #2472!

[foot]

lgtm!