diff --git a/website/preview/m1/alkalmazasok.html b/website/preview/m1/alkalmazasok.html
index 427ce2e2..ea30e606 100644
--- a/website/preview/m1/alkalmazasok.html
+++ b/website/preview/m1/alkalmazasok.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
-<html lang="hu">
+<html lang="hu" class="no-js">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noindex, nofollow">
     <meta name="description" content="Mockup: a telepíthető alkalmazások katalógusa a vezérlőpult felületén.">
     <title>Alkalmazások · Felhom.eu mockup</title>
+    <script>
+    /* The controller's own progressive-enhancement hook (layout.html): flip no-js -> js before
+       the first CSS-dependent paint, so the off-canvas drawer engages ONLY where the drawer
+       script can open it. Without it the sidebar stays an in-flow flex child on a phone and
+       squeezes the content column - which is exactly what happened here first time. */
+    document.documentElement.className=document.documentElement.className.replace('no-js','js');
+    </script>
     <link rel="stylesheet" href="/preview/mockup.css?v=1">
     <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
 </head>
diff --git a/website/preview/m1/hogyan.html b/website/preview/m1/hogyan.html
index cbbb5ae8..a599aaf4 100644
--- a/website/preview/m1/hogyan.html
+++ b/website/preview/m1/hogyan.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
-<html lang="hu">
+<html lang="hu" class="no-js">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noindex, nofollow">
     <meta name="description" content="Mockup: hogyan jutsz el a működő otthoni szerverig.">
     <title>Hogyan működik · Felhom.eu mockup</title>
+    <script>
+    /* The controller's own progressive-enhancement hook (layout.html): flip no-js -> js before
+       the first CSS-dependent paint, so the off-canvas drawer engages ONLY where the drawer
+       script can open it. Without it the sidebar stays an in-flow flex child on a phone and
+       squeezes the content column - which is exactly what happened here first time. */
+    document.documentElement.className=document.documentElement.className.replace('no-js','js');
+    </script>
     <link rel="stylesheet" href="/preview/mockup.css?v=1">
     <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
 </head>
diff --git a/website/preview/m1/index.html b/website/preview/m1/index.html
index 918a8887..6414b1db 100644
--- a/website/preview/m1/index.html
+++ b/website/preview/m1/index.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
-<html lang="hu">
+<html lang="hu" class="no-js">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noindex, nofollow">
     <meta name="description" content="Mockup: a felhom.eu weboldal a doboz vezérlőpultjaként.">
     <title>Indítópult · Felhom.eu mockup</title>
+    <script>
+    /* The controller's own progressive-enhancement hook (layout.html): flip no-js -> js before
+       the first CSS-dependent paint, so the off-canvas drawer engages ONLY where the drawer
+       script can open it. Without it the sidebar stays an in-flow flex child on a phone and
+       squeezes the content column - which is exactly what happened here first time. */
+    document.documentElement.className=document.documentElement.className.replace('no-js','js');
+    </script>
     <link rel="stylesheet" href="/preview/mockup.css?v=1">
     <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
 </head>
diff --git a/website/preview/m1/kapcsolat.html b/website/preview/m1/kapcsolat.html
index 64d10756..bfc9e99f 100644
--- a/website/preview/m1/kapcsolat.html
+++ b/website/preview/m1/kapcsolat.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
-<html lang="hu">
+<html lang="hu" class="no-js">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noindex, nofollow">
     <meta name="description" content="Mockup: kapcsolatfelvétel a vezérlőpult felületén.">
     <title>Kapcsolat · Felhom.eu mockup</title>
+    <script>
+    /* The controller's own progressive-enhancement hook (layout.html): flip no-js -> js before
+       the first CSS-dependent paint, so the off-canvas drawer engages ONLY where the drawer
+       script can open it. Without it the sidebar stays an in-flow flex child on a phone and
+       squeezes the content column - which is exactly what happened here first time. */
+    document.documentElement.className=document.documentElement.className.replace('no-js','js');
+    </script>
     <link rel="stylesheet" href="/preview/mockup.css?v=1">
     <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
 </head>
diff --git a/website/preview/m1/mentesek.html b/website/preview/m1/mentesek.html
index 05667701..f41b65f2 100644
--- a/website/preview/m1/mentesek.html
+++ b/website/preview/m1/mentesek.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
-<html lang="hu">
+<html lang="hu" class="no-js">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noindex, nofollow">
     <meta name="description" content="Mockup: a háromszintű mentés a vezérlőpult felületén.">
     <title>Biztonsági mentés · Felhom.eu mockup</title>
+    <script>
+    /* The controller's own progressive-enhancement hook (layout.html): flip no-js -> js before
+       the first CSS-dependent paint, so the off-canvas drawer engages ONLY where the drawer
+       script can open it. Without it the sidebar stays an in-flow flex child on a phone and
+       squeezes the content column - which is exactly what happened here first time. */
+    document.documentElement.className=document.documentElement.className.replace('no-js','js');
+    </script>
     <link rel="stylesheet" href="/preview/mockup.css?v=1">
     <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
 </head>
diff --git a/website/preview/m1/teszteles.html b/website/preview/m1/teszteles.html
index 24da3be4..6da3a04a 100644
--- a/website/preview/m1/teszteles.html
+++ b/website/preview/m1/teszteles.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
-<html lang="hu">
+<html lang="hu" class="no-js">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noindex, nofollow">
     <meta name="description" content="Mockup: a zárt teszt feltételei és a jelentkezés.">
     <title>Tesztelés · Felhom.eu mockup</title>
+    <script>
+    /* The controller's own progressive-enhancement hook (layout.html): flip no-js -> js before
+       the first CSS-dependent paint, so the off-canvas drawer engages ONLY where the drawer
+       script can open it. Without it the sidebar stays an in-flow flex child on a phone and
+       squeezes the content column - which is exactly what happened here first time. */
+    document.documentElement.className=document.documentElement.className.replace('no-js','js');
+    </script>
     <link rel="stylesheet" href="/preview/mockup.css?v=1">
     <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
 </head>