From dd89e1bf998178ea727199bc09c526b9c36ec7a3 Mon Sep 17 00:00:00 2001
From: kisfenyo <nagyfenyvesi.viktor@gmail.com>
Date: Sun, 11 Oct 2026 12:18:17 +0200
Subject: [PATCH] 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 | 9 ++++++++-
 website/preview/m1/hogyan.html       | 9 ++++++++-
 website/preview/m1/index.html        | 9 ++++++++-
 website/preview/m1/kapcsolat.html    | 9 ++++++++-
 website/preview/m1/mentesek.html     | 9 ++++++++-
 website/preview/m1/teszteles.html    | 9 ++++++++-
 6 files changed, 48 insertions(+), 6 deletions(-)

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>