website: the mockup shell flips no-js -> js like the controller does

Measured at 390px: the sidebar stayed an in-flow flex child and squeezed the
content column to ~208px, so the launcher grid collapsed to ONE column and the
front page became 15 597px tall on a phone; the contact page overflowed
horizontally (scrollWidth 467 in a 375 viewport).

The cause was not missing CSS - the controller's off-canvas rules were all copied.
They are gated on a 'js' class that layout.html sets in an inline head script and
the mockup shell did not. Copied that hook verbatim, so the drawer engages only
where the drawer script can open it, and the no-js path (sidebar static and full
width, burger hidden) is the controller's own.

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>

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>

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>

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>

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>

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>