fix: use dynamic view height for mobile support (#1014)

This commit is contained in:
Daniel Lautzenheiser 2024-01-02 12:23:09 -05:00 committed by GitHub
parent bf7ebcaed2
commit 94b21424ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 6 additions and 6 deletions

View File

@ -144,7 +144,7 @@ const StyledNav = styled('nav')(
align-self: flex-start; align-self: flex-start;
position: sticky; position: sticky;
top: 0; top: 0;
max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px);
overflow-y: auto; overflow-y: auto;
top: 16px; top: 16px;

View File

@ -16,7 +16,7 @@ import type { DocsGroup, SearchablePage } from '../../interface';
const StyledPageContentWrapper = styled('div')` const StyledPageContentWrapper = styled('div')`
display: block; display: block;
height: calc(100vh - 72px); height: calc(100dvh - 72px);
width: 100%; width: 100%;
position: relative; position: relative;
top: 72px; top: 72px;

View File

@ -13,7 +13,7 @@ const StyledCommunityContent = styled('div')(
({ theme }) => ` ({ theme }) => `
width: 100%; width: 100%;
padding-top: 72px; padding-top: 72px;
min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 80px; gap: 80px;

View File

@ -20,7 +20,7 @@ const StyledReleaseContent = styled('div')(
({ theme }) => ` ({ theme }) => `
width: 100%; width: 100%;
padding-top: 72px; padding-top: 72px;
min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;

View File

@ -3,8 +3,8 @@ module.exports = {
theme: { theme: {
extend: { extend: {
height: { height: {
main: "calc(100vh - 64px)", main: "calc(100dvh - 64px)",
"main-mobile": "calc(100vh - 128px)", "main-mobile": "calc(100dvh - 128px)",
"media-library-dialog": "80vh", "media-library-dialog": "80vh",
"media-card": "240px", "media-card": "240px",
"media-preview-image": "104px", "media-preview-image": "104px",