(core) Add viewport meta tag conditionally, and show a toggle for it on small devices.

Summary:
- Enable narrow-screen layout for home page
- Clean up margins/spacing on small-screen home page
- Use "<768" as small-screen condition rather than "<=768".
- Include meta-viewport tag conditionally, off by default.
- Include "Toggle Mobile Mode" option in AccountMenu to toggle it on.
- In a test, add an after() clause to restore window size even when test fails

Test Plan: Only tested manually on iPhone (Safari & FF).

Reviewers: paulfitz

Reviewed By: paulfitz

Subscribers: cyprien

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

app/client/ui/AccountWidget.ts

@@ -5,8 +5,9 @@ import {getLoginOrSignupUrl, getLoginUrl, getLogoutUrl, urlState} from 'app/clie
 import {showDocSettingsModal} from 'app/client/ui/DocumentSettings';
 import {showProfileModal} from 'app/client/ui/ProfileDialog';
 import {createUserImage} from 'app/client/ui/UserImage';
+import * as viewport from 'app/client/ui/viewport';
 import {primaryButtonLink} from 'app/client/ui2018/buttons';
-import {colors, testId, vars} from 'app/client/ui2018/cssVars';
+import {colors, mediaDeviceNotSmall, testId, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuDivider, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
 import {commonUrls} from 'app/common/gristUrls';
@@ -111,6 +112,13 @@ export class AccountWidget extends Disposable {
         ) :
         menuItemLink({href: commonUrls.plans}, 'Upgrade Plan'),
 
+      menuItem(viewport.toggleViewport,
+        cssSmallDeviceOnly.cls(''),   // Only show this toggle on small devices.
+        'Toggle Mobile Mode',
+        cssCheckmark('Tick', dom.show(viewport.viewportEnabled)),
+        testId('usermenu-toggle-mobile'),
+      ),
+
       // TODO Add section ("Here right now") listing icons of other users currently on this doc.
       // (See Invision "Panels" near the bottom.)
 
@@ -222,3 +230,19 @@ const cssOrgCheckmark = styled(icon, `
     display: block;
   }
 `);
+
+const cssCheckmark = styled(icon, `
+  flex: none;
+  margin-left: 16px;
+  --icon-color: ${colors.lightGreen};
+`);
+
+// Note that this css class hides the item when the device width is small (not based on viewport
+// width, which may be larger). This only appropriate for when to enable the "mobile mode" toggle.
+const cssSmallDeviceOnly = styled(menuItem, `
+  @media ${mediaDeviceNotSmall} {
+    & {
+      display: none;
+    }
+  }
+`);