From 4dc1631570114ba38629eff53a6baab1190be2e0 Mon Sep 17 00:00:00 2001 From: kisfenyo Date: Sun, 11 Oct 2026 12:20:16 +0200 Subject: [PATCH] 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 | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/website/preview/mockup.css b/website/preview/mockup.css index c65ee08c..102a4981 100644 --- a/website/preview/mockup.css +++ b/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; }