(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
This commit is contained in:
Dmitry S
2021-02-28 00:27:34 -05:00
parent d8d1a91beb
commit aae4a58300
5 changed files with 45 additions and 12 deletions

View File

@@ -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};