website: the mockup stacks on a phone (the controller's bare body rule)

The controller's mobile layout depends on '@media(max-width:768px){ body {
flex-direction: column } }'. My extractor keys on CLASS names, so it copied every
.sidebar/.content/.mobile-topbar rule and silently dropped that one - and a bare
element rule is invisible to that kind of copy.

The symptom was not subtle once measured: the sticky topbar stayed a ROW flex item,
pushed .content 135px right, and the launcher grid fell to ONE column, making the
front page 15 597px tall on a phone and overflowing mentesek/kapcsolat to a
scrollWidth of 467 in a 375 viewport.

This is a real data point for the shared-design question, not just a mockup bug: a
component-level copy between the two repos misses the element-level rules the
components silently depend on.

website/preview/mockup.css

@@ -1293,6 +1293,13 @@ select.form-control option {
     .m2-who { flex-direction: column; }
 }
 @media (max-width: 768px) {
+    /* ADAPTED from the controller, which carries it as a bare `body` rule - the kind an
+       extractor keyed on class names does not see. Without it the sticky mobile topbar
+       stays a ROW flex item, pushes .content 135px to the right, and the launcher grid
+       collapses to one column. Measured, then fixed. */
+    body.mockup { flex-direction: column; }
+    body.mockup.nav-open { overflow: hidden; }
+
     .welcome-card { flex-direction: column; align-items: flex-start; }
     .nav-off-hint { display: inline-block; margin-left: .5rem; }
     .app-panel { padding: 1rem .5rem; }