(core) A few improvements to CSS on mobile.

Summary:
- Adjust ExampleCard css to fit on x-small screens, including its close button,
  so that it may be closed.
- In TopBar on small screens, hide Notifications button and default action for
  Share; adjust spacing.
- Add overflow: hidden to PagePanels, to make sure it doesn't slide off of
  visible area.

Test Plan: Tested on iOS.

Reviewers: paulfitz

Reviewed By: paulfitz

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

app/client/ui/ExampleCard.ts

@@ -2,7 +2,7 @@ import {AppModel} from 'app/client/models/AppModel';
 import {getUserOrgPrefObs} from 'app/client/models/UserPrefs';
 import {IExampleInfo} from 'app/client/ui/ExampleInfo';
 import {prepareForTransition, TransitionWatcher} from 'app/client/ui/transitions';
-import {colors, testId, vars} from 'app/client/ui2018/cssVars';
+import {colors, mediaXSmall, testId, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
 import {dom, Observable, styled} from 'grainjs';
@@ -125,22 +125,35 @@ const cssCard = styled('div', `
   transition-property: opacity, transform;
   transition-duration: 0.5s;
   transition-timing-func: ease-in;
+  --title-font-size: ${vars.headerControlFontSize};
+
+  @media ${mediaXSmall} {
+    & {
+      flex-direction: column;
+      padding: 32px;
+      --title-font-size: 18px;
+    }
+  }
 `);
 
 const cssImage = styled('img', `
   flex: none;
   width: 180px;
   height: 140px;
-  margin: 0 -8px;
+  margin: 0 16px 0 -8px;
+  @media ${mediaXSmall} {
+    & {
+      margin: auto;
+    }
+  }
 `);
 
 const cssBody = styled('div', `
-  margin-left: 24px;
   min-width: 0px;
 `);
 
 const cssTitle = styled('div', `
-  font-size: ${vars.headerControlFontSize};
+  font-size: var(--title-font-size);
   font-weight: ${vars.headerControlTextWeight};
   margin-bottom: 16px;
 `);

app/client/ui/PagePanels.ts

@@ -193,6 +193,7 @@ const cssPageContainer = styled(cssHBox, `
   position: absolute;
   isolation: isolate; /* Create a new stacking context */
   z-index: 0; /* As of March 2019, isolation does not have Edge support, so force one with z-index */
+  overflow: hidden;
   top: 0;
   left: 0;
   right: 0;
@@ -210,6 +211,7 @@ const cssPageContainer = styled(cssHBox, `
     }
   }
 `);
+
 export const cssLeftPane = styled(cssVBox, `
   position: relative;
   background-color: ${colors.lightGrey};

app/client/ui/ShareMenu.ts

@@ -5,7 +5,7 @@ import {docUrl, urlState} from 'app/client/models/gristUrlState';
 import {makeCopy, replaceTrunkWithFork} from 'app/client/ui/MakeCopyMenu';
 import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
 import {primaryButton} from 'app/client/ui2018/buttons';
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {colors, mediaXSmall, testId} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuAnnotate, menuDivider, menuIcon, menuItem, menuItemLink, menuText} from 'app/client/ui2018/menus';
 import {buildUrlId, parseUrlId} from 'app/common/gristUrls';
@@ -258,11 +258,19 @@ const cssShareButton = styled('div', `
   }
 `);
 
+// Hide this on very small screens, since it takes up a lot of space and its action is also
+// available in the associated menu.
 const cssShareAction = styled(primaryButton, `
   margin-right: -16px;
   padding-right: 24px;
   background-color: var(--share-btn-bg);
   border-color:     var(--share-btn-bg);
+
+  @media ${mediaXSmall} {
+    & {
+      display: none !important;
+    }
+  }
 `);
 
 const cssShareCircle = styled(cssHoverCircle, `

app/client/ui/TopBar.ts

@@ -8,7 +8,7 @@ import {buildNotifyMenuButton} from 'app/client/ui/NotifyUI';
 import {buildShareMenuButton} from 'app/client/ui/ShareMenu';
 import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
 import {docBreadcrumbs} from 'app/client/ui2018/breadcrumbs';
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {colors, cssHideForNarrowScreen, testId} from 'app/client/ui2018/cssVars';
 import {IconName} from 'app/client/ui2018/IconList';
 import {waitGrainObs} from 'app/common/gutil';
 import {Computed, dom, DomElementArg, makeTestId, MultiHolder, Observable, styled} from 'grainjs';
@@ -76,7 +76,10 @@ export function createTopBarDoc(owner: MultiHolder, appModel: AppModel, pageMode
 
     buildShareMenuButton(pageModel),
 
+    dom.update(
       buildNotifyMenuButton(appModel.notifier, appModel),
+      cssHideForNarrowScreen.cls(''),
+    ),
 
     dom('div', dom.create(AccountWidget, appModel, pageModel))
   ];
@@ -134,7 +137,7 @@ const cssTopBarUndoBtn = styled(cssTopBarBtn, `
 const cssBreadcrumbContainer = styled('div', `
   padding: 7px;
   flex: 1 1 auto;
-  min-width: 0px;
+  min-width: 24px;
   overflow: hidden;
 `);
 
@@ -143,5 +146,6 @@ const cssFlexSpace = styled('div', `
 `);
 
 const cssSpacer = styled('div', `
-  width: 10px;
+  max-width: 10px;
+  flex: auto;
 `);

app/client/ui2018/search.ts

@@ -6,7 +6,7 @@ import { createGroup } from 'app/client/components/commands';
 import { reportError } from 'app/client/models/AppModel';
 import { SearchModel } from 'app/client/models/SearchModel';
 import { cssHoverCircle, cssTopBarBtn } from 'app/client/ui/TopBarCss';
-import { colors } from 'app/client/ui2018/cssVars';
+import { colors, mediaSmall } from 'app/client/ui2018/cssVars';
 import { icon } from 'app/client/ui2018/icons';
 import { dom, input, styled } from 'grainjs';
 import { noTestId, TestId } from 'grainjs';
@@ -18,7 +18,7 @@ const EXPAND_TIME = .5;
 
 const searchWrapper = styled('div', `
   display: flex;
-  flex: 0 0 initial;
+  flex: initial;
   align-items: center;
   box-sizing: border-box;
   border: 1px solid transparent;
@@ -28,9 +28,15 @@ const searchWrapper = styled('div', `
   max-height: 50px;
   transition: width 0.4s;
   &-expand {
-    width: 100%;
+    width: 100% !important;
     border: 1px solid grey;
   }
+  @media ${mediaSmall} {
+    & {
+      width: 32px;
+      padding: 0px;
+    }
+  }
 `);
 
 const expandedSearch = styled('div', `