(core) Make side panels responsive and start closed on small screens.

Summary:
- Add isNarrowScreenObs() observable.
- Remove optimizeNarrowScreen flag (now assumed always true).
- Added viewport support and mobile tweaks to Error/Billing/Welcome pages.
- Fix responsiveness of panel transitions, and of side panel state.
- Close left panel on navigation to another page or workspace.
- Start panels collapsed in both doc and docmenu cases.

Test Plan: Tested manually, and fixed tests to accept the new behavior.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2726

app/client/ui2018/cssVars.ts

@@ -8,7 +8,7 @@
  */
 import {urlState} from 'app/client/models/gristUrlState';
 import {getTheme, ProductFlavor} from 'app/client/ui/CustomThemes';
-import {dom, makeTestId, styled, TestId} from 'grainjs';
+import {dom, makeTestId, Observable, styled, TestId} from 'grainjs';
 import values = require('lodash/values');
 
 const VAR_PREFIX = 'grist';
@@ -164,8 +164,20 @@ export const mediaNotSmall = `(min-width: ${mediumScreenWidth}px)`;
 
 export const mediaDeviceNotSmall = `(min-device-width: ${mediumScreenWidth}px)`;
 
-export function isNarrowScreen() {
-  return window.innerWidth <= 768;
+function isNarrowScreen() {
+  return window.innerWidth < mediumScreenWidth;
+}
+
+let _isNarrowScreenObs: Observable<boolean>|undefined;
+
+// Returns a singleton observable for whether the screen is a small one.
+export function isNarrowScreenObs(): Observable<boolean> {
+  if (!_isNarrowScreenObs) {
+    const obs = Observable.create<boolean>(null, isNarrowScreen());
+    window.addEventListener('resize', () => obs.set(isNarrowScreen()));
+    _isNarrowScreenObs = obs;
+  }
+  return _isNarrowScreenObs;
 }
 
 export const cssHideForNarrowScreen = styled('div', `