Fix css height for mobile safari not to overlap URL bar (#7334)

This commit is contained in:
Tsuneo Yoshioka
2025-08-23 03:42:36 +09:00
committed by GitHub
parent 00a97d9266
commit 0b5907f12b
6 changed files with 14 additions and 10 deletions

View File

@@ -15,7 +15,7 @@ body {
display: table; display: table;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
height: calc(100vh - 116px); height: calc(100% - 116px);
} }
@media (min-width: 992px) { @media (min-width: 992px) {

View File

@@ -20,7 +20,7 @@ html {
html, html,
body { body {
min-height: 100vh; height: 100%;
} }
body { body {
@@ -35,7 +35,7 @@ body {
} }
#application-root { #application-root {
min-height: 100vh; height: 100%;
} }
#application-root, #application-root,

View File

@@ -10,7 +10,7 @@
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
width: 1px; width: 1px;
height: 100vh; height: 100%;
} }
} }
@@ -135,4 +135,4 @@
} }
} }

View File

@@ -8,7 +8,7 @@ body.fixed-layout {
padding-bottom: 0; padding-bottom: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100%;
.application-layout-content > div { .application-layout-content > div {
display: flex; display: flex;
@@ -90,7 +90,7 @@ body.fixed-layout {
.embed__vis { .embed__vis {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
height: calc(~'100vh - 25px'); height: calc(~'100% - 25px');
> .embed-heading { > .embed-heading {
flex: 0 0 auto; flex: 0 0 auto;

View File

@@ -7,10 +7,10 @@ body #application-root {
flex-direction: row; flex-direction: row;
justify-content: stretch; justify-content: stretch;
padding-bottom: 0 !important; padding-bottom: 0 !important;
height: 100vh; height: 100%;
.application-layout-side-menu { .application-layout-side-menu {
height: 100vh; height: 100%;
position: relative; position: relative;
@media @mobileBreakpoint { @media @mobileBreakpoint {
@@ -47,6 +47,10 @@ body #application-root {
} }
} }
body > section {
height: 100%;
}
body.fixed-layout #application-root { body.fixed-layout #application-root {
.application-layout-content { .application-layout-content {
padding-bottom: 0; padding-bottom: 0;

View File

@@ -8,7 +8,7 @@
} }
> .container { > .container {
min-height: calc(100vh - 95px); min-height: calc(100% - 95px);
} }
.loading-message { .loading-message {