From 24849599e142708b6e7f69ab7f80e11b90003607 Mon Sep 17 00:00:00 2001 From: elvis kahoro Date: Sat, 24 Oct 2026 13:06:17 +0000 Subject: [PATCH] fix(typeset): show Get Code panel at lg breakpoint --- native/pages/typeset.py | 2 +- tests/test_typeset_page.py | 98 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 tests/test_typeset_page.py diff --git a/native/pages/typeset.py b/native/pages/typeset.py index a06aeb20..8c8ce2d2 100644 --- a/native/pages/typeset.py +++ b/native/pages/typeset.py @@ -209,7 +209,7 @@ def source_space(): id="source-space", class_name=( "hidden max-lg:group-data-[show=true]:flex max-lg:group-data-[show=true]:flex-1 " - "max-lg:group-data-[show=true]:min-h-0 xl:flex lg:flex-col lg:gap-y-4 " + "max-lg:group-data-[show=true]:min-h-0 lg:flex lg:flex-col lg:gap-y-4 " "lg:w-full lg:flex-initial lg:h-auto lg:min-h-0 lg:min-w-0 lg:max-w-full lg:flex-1 " "lg:h-full lg:w-sm lg:max-w-sm lg:shrink-0" ), diff --git a/tests/test_typeset_page.py b/tests/test_typeset_page.py new file mode 100644 index 00000000..a4ba9d79 --- /dev/null +++ b/tests/test_typeset_page.py @@ -0,0 +1,98 @@ +"""Regression tests for the /typeset page layout. + +Guards against the off-by-one breakpoint bug where the "Get Code" +panel (``#source-space``) became unreachable on viewports in the +Tailwind ``lg``-``xl`` band (1024px ≤ width < 1280px): the panel used +``xl:flex`` as its only desktop always-visible override while the +"Get Code/Preview" toggle button was ``lg:hidden``, leaving the +[1024, 1280)px range with neither a visible panel nor a toggle to +reveal it. The fix is to make the panel always visible at ``lg`` +(``lg:flex``), matching the breakpoint where the page switches to its +three-column desktop layout (``lg:flex-row``) and where the toggle +disappears (``lg:hidden``). + +These tests assert the class-string contract statically (no browser +required) so the regression cannot silently return. +""" + +from native.pages.typeset import source_space, typeset_page + +_CLASS_DELIMS = str.maketrans({'"': " ", "(": " ", ")": " ", ",": " "}) + + +def _is_component(node) -> bool: + return hasattr(node, "children") and hasattr(node, "class_name") + + +def _find_by_id(root, target_id: str): + """Depth-first search for a Reflex component whose ``id`` equals ``target_id``.""" + if _is_component(root): + cid = root.id if hasattr(root, "id") else None + if isinstance(cid, str) and cid == target_id: + return root + children = root.children if hasattr(root, "children") else None + if isinstance(children, list): + for child in children: + found = _find_by_id(child, target_id) + if found is not None: + return found + return None + + +def _class_str(component) -> str: + cls = component.class_name + return cls if isinstance(cls, str) else str(cls) + + +def _tokens(cls: str) -> set[str]: + return set(cls.translate(_CLASS_DELIMS).split()) + + +def test_source_space_is_always_visible_at_lg_not_xl(): + cls = source_space().class_name + assert isinstance(cls, str) + tokens = _tokens(cls) + + assert "hidden" in tokens, "base visibility must be hidden (mobile default)" + assert "max-lg:group-data-[show=true]:flex" in tokens, ( + "mobile toggle-reveal rule must be preserved" + ) + assert "lg:flex" in tokens, ( + "desktop always-visible override must activate at lg breakpoint" + ) + assert "xl:flex" not in tokens, ( + "xl:flex reintroduces the 1024-1279px dead band: the panel would " + "only reappear at 1280px while the lg:hidden toggle vanishes at 1024px" + ) + + +def test_typeset_desktop_layout_and_source_panel_share_lg_breakpoint(): + page = typeset_page() + + wrapper = _find_by_id(page, "typeset-toggle-wrapper") + assert wrapper is not None, "typeset-toggle-wrapper must exist" + assert "lg:flex-row" in _tokens(_class_str(wrapper)), ( + "the page switches to its three-column desktop layout at lg; the " + "source column must therefore also be visible at lg" + ) + + toggle = _find_by_id(page, "typeset-code-button") + assert toggle is not None, "typeset-code-button toggle must exist" + assert "lg:hidden" in _tokens(_class_str(toggle)), ( + "the 'Get Code/Preview' toggle must be hidden at lg+ since the " + "panel is always visible there" + ) + + source = _find_by_id(page, "source-space") + assert source is not None, "source-space panel must exist" + source_tokens = _tokens(_class_str(source)) + assert "lg:flex" in source_tokens, ( + "source-space must become always-visible at the same lg breakpoint " + "where the desktop layout starts (lg:flex-row) and the toggle " + "disappears (lg:hidden)" + ) + assert "xl:flex" not in source_tokens, ( + "an xl:flex override on source-space is inconsistent with the " + "lg:flex-row wrapper and lg:hidden toggle and reintroduces the " + "1024-1279px dead band" + )