(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/ui2018/breadcrumbs.ts

@@ -6,7 +6,7 @@
  * Workspace is a clickable link and document and page names are editable labels.
  */
 import { urlState } from 'app/client/models/gristUrlState';
-import { colors, cssHideForNarrowScreen, maxNarrowScreenWidth, testId } from 'app/client/ui2018/cssVars';
+import { colors, cssHideForNarrowScreen, mediaNotSmall, testId } from 'app/client/ui2018/cssVars';
 import { editableLabel } from 'app/client/ui2018/editableLabel';
 import { icon } from 'app/client/ui2018/icons';
 import { UserOverride } from 'app/common/DocListAPI';
@@ -55,7 +55,7 @@ const cssWorkspaceNarrowScreen = styled(icon, `
   margin-right: 8px;
   background-color: ${colors.slate};
   cursor: pointer;
-  @media not all and (max-width: ${maxNarrowScreenWidth}px) {
+  @media ${mediaNotSmall} {
     & {
       display: none;
     }

app/client/ui2018/cssVars.ts

@@ -154,15 +154,22 @@ export const cssRootVars = cssBodyVars.className;
 // class ".test-{name}". Ideally, we'd use noTestId() instead in production.
 export const testId: TestId = makeTestId('test-');
 
-// Max width for narrow screen layout (in px). Note: 768px is bootstrap's definition of small screen
-export const maxNarrowScreenWidth = 768;
+// Min width for normal screen layout (in px). Note: <768px is bootstrap's definition of small
+// screen (covers phones, including landscape, but not tablets).
+const mediumScreenWidth = 768;
+
+// Fractional width for max-query follows https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
+export const mediaSmall = `(max-width: ${mediumScreenWidth - 0.02}px)`;
+export const mediaNotSmall = `(min-width: ${mediumScreenWidth}px)`;
+
+export const mediaDeviceNotSmall = `(min-device-width: ${mediumScreenWidth}px)`;
 
 export function isNarrowScreen() {
   return window.innerWidth <= 768;
 }
 
 export const cssHideForNarrowScreen = styled('div', `
-  @media (max-width: ${maxNarrowScreenWidth}px) {
+  @media ${mediaSmall} {
     & {
       display: none !important;
     }