Fixed appearance when popup is opened in the new tab instead of popup

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);
 </script>
 
 <Header/>

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;