LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

address doublescroll #3028 (#3035)

Browse Source 
* quick fix for mobile menu button overlap

* - use new dynamic vh css prop to handle ios safari double scrolling
- only force tabs height when online

* cleanup

* add comment
This commit is contained in:
gingervitis 2023-05-21 14:11:53 -07:00 committed by GitHub
parent 89bd0c2606
commit 4703a64878
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/layouts/Main/Main.module.scss
View File

@ -4,7 +4,8 @@
// this margin is for fixed header // this margin is for fixed header
padding-top: var(--header-height); padding-top: var(--header-height);
background-color: var(--theme-color-main-background); background-color: var(--theme-color-main-background);
min-height: 100vh; min-height: 100dvh;
position: relative; position: relative;
// add some spacing between the last row of content and the footer // add some spacing between the last row of content and the footer

8
web/components/ui/Content/Content.module.scss
View File

@ -20,6 +20,12 @@
&.online { &.online {
position: absolute; position: absolute;
top: calc(var(--player-container-height) + var(--status-bar-height) + var(--header-height)); top: calc(var(--player-container-height) + var(--status-bar-height) + var(--header-height));
// As we want content in the tabs to scroll within itself, force the tabs to display max height at all times.
// (We don't have to do this when not-online because we're having the entire layout scroll.
:global(.ant-tabs-content) {
height: 100% !important;
}
} }
} }
@ -55,7 +61,7 @@
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 10px; right: 10px;
z-index: 200; z-index: 199;
} }
} }

1
web/styles/ant-overrides.scss
View File

@ -162,7 +162,6 @@ DROPDOWN
height: 100%; height: 100%;
} }
.ant-tabs-content { .ant-tabs-content {
height: 100% !important;
overflow: auto; overflow: auto;
.ant-tabs-tabpane-active { .ant-tabs-tabpane-active {
height: 100%; height: 100%;