diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte index cceb11a48..7878d2693 100644 --- a/ts/graphs/GraphsPage.svelte +++ b/ts/graphs/GraphsPage.svelte @@ -59,13 +59,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html gap: 1em; grid-template-columns: repeat(3, minmax(0, 1fr)); // required on Safari to stretch whole width - width: 100vw; + width: calc(100vw - 3em); + margin-left: 1em; + margin-right: 1em; + + @media only screen and (max-width: 600px) { + width: calc(100vw - 1rem); + margin-left: 0.5rem; + margin-right: 0.5rem; + } @media only screen and (max-width: 1400px) { - grid-template-columns: 50% 50%; + grid-template-columns: 1fr 1fr; } @media only screen and (max-width: 1200px) { - grid-template-columns: 100%; + grid-template-columns: 1fr; } @media only screen and (max-width: 600px) { font-size: 12px; diff --git a/ts/graphs/graphs-base.scss b/ts/graphs/graphs-base.scss index a24c3ffdf..2b65560d9 100644 --- a/ts/graphs/graphs-base.scss +++ b/ts/graphs/graphs-base.scss @@ -1,18 +1,6 @@ @use "sass/root-vars"; @import "sass/base"; -body { - padding: 0 1em 1em 1em; -} - -@media only screen and (max-width: 600px) { - body { - padding: 0; - padding-left: 0.25rem; - padding-right: 0.25rem; - } -} - button { margin-bottom: 5px; }