diff --git a/web/source/css/base.css b/web/source/css/base.css index a211919c57..7f59aebfdc 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -47,7 +47,6 @@ html, body { body { line-height: 1.5em; - min-height: 100vh; position: relative; } @@ -56,11 +55,8 @@ body { } .page { - position: absolute; display: grid; - min-height: 100%; - min-width: 100%; - width: 100%; + min-height: 100vh; grid-template-columns: auto minmax(auto, 50rem) auto; grid-template-columns: auto min(92%, 50rem) auto; diff --git a/web/source/css/profile.css b/web/source/css/profile.css index 5576610f1d..288ca69552 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -30,7 +30,6 @@ main { .profile { background: $bg-accent; display: grid; - grid-template-rows: auto auto auto; grid-template-columns: 100%; gap: 0.5rem; margin-bottom: 0.2rem; diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 53fb0dd8a6..e401a64a1f 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -35,9 +35,9 @@ section { #root { display: grid; - grid-template-columns: 1fr 90ch 1fr; - width: 100vw; - max-width: 100vw; + /* keep in sync with base.css .page {} */ + grid-template-columns: auto minmax(auto, 50rem) auto; + grid-template-columns: auto min(92%, 50rem) auto; box-sizing: border-box; section.with-sidebar { @@ -319,22 +319,25 @@ section.with-sidebar > div, section.with-sidebar > form { display: grid; grid-template-columns: 70% 30%; grid-template-rows: 100%; + gap: 1rem; + + .profile { + .basic { + margin-bottom: 0.5rem; + /* margin-top: 0; */ + } + } .files { width: 100%; - margin: 1rem; - margin-right: 0; display: flex; flex-direction: column; justify-content: center; + gap: 1rem; h3 { - margin-top: 0; - margin-bottom: 0.5rem; - } - - div:first-child { - margin-bottom: 1rem; + margin: 0; + margin-bottom: 0.3rem; } span { @@ -456,7 +459,8 @@ span.form-info { } } -@media screen and (max-width: 100ch) { +@media screen and (max-width: 60rem) { + /* vertical layout */ #root { padding: 1rem; grid-template-columns: 100%; @@ -484,13 +488,8 @@ span.form-info { } .user-profile .overview { - grid-template-columns: 100%; - grid-template-rows: auto auto; - - .files { - margin: 0; - margin-top: 1rem; - } + grid-template-columns: auto; + grid-template-rows: auto 1fr; } main section {