(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/ui/WelcomePage.ts

@@ -9,7 +9,7 @@ import * as BillingPageCss from "app/client/ui/BillingPageCss";
 import * as forms from "app/client/ui/forms";
 import { pagePanels } from "app/client/ui/PagePanels";
 import { bigBasicButton, bigPrimaryButton, bigPrimaryButtonLink, cssButton } from "app/client/ui2018/buttons";
-import { colors, testId, vars } from "app/client/ui2018/cssVars";
+import { colors, mediaSmall, testId, vars } from "app/client/ui2018/cssVars";
 import { getOrgName, Organization } from "app/common/UserAPI";
 
 async function _submitForm(form: HTMLFormElement, pending: Observable<boolean>) {
@@ -199,7 +199,7 @@ const cssScrollContainer = styled('div', `
 `);
 
 const cssContainer = styled('div', `
-  width: 450px;
+  max-width: 450px;
   align-self: center;
   margin: 60px;
   display: flex;
@@ -208,6 +208,11 @@ const cssContainer = styled('div', `
     content: "";
     height: 8px;
   }
+  @media ${mediaSmall} {
+    & {
+      margin: 24px;
+    }
+  }
 `);
 
 const cssFlexSpace = styled('div', `