diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 7b76c25..4ae27b7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,6 +2,10 @@ import "../styles/popup.scss"; import Header from "$components/layout/Header.svelte"; import Footer from "$components/layout/Footer.svelte"; + + // Sort of a hack, detect if we rendered in the browser tab or in the popup. + // Popup will always should have fixed 320px size, otherwise we consider it opened in the tab. + document.body.classList.toggle('is-in-tab', window.innerWidth > 320);
diff --git a/src/styles/popup.scss b/src/styles/popup.scss index 1e5e013..df4dc80 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -10,12 +10,21 @@ font-size: inherit; } +body { + width: 320px; + + // Hacky class which is added by the JavaScript indicating that page was (probably) opened in the tab + &.is-in-tab { + width: 100%; + max-width: 640px; + margin: 0 auto; + } +} + html, body { background-color: colors.$background; color: colors.$text; font-size: 16px; - min-width: 320px; - max-height: min(100vh, 320px); font-family: verdana, arial, helvetica, sans-serif; margin: 0; padding: 0;