diff --git a/static/style.css b/static/style.css
index a162e2db..0c2f6ea2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1314,9 +1314,15 @@
   @media(min-width:901px){
     html[data-workspace-panel="closed"] .rightpanel{width:0 !important;opacity:0;transform:translateX(14px);border-left-color:transparent;pointer-events:none;}
     .layout.workspace-panel-collapsed .rightpanel{width:0 !important;opacity:0;transform:translateX(14px);border-left-color:transparent;pointer-events:none;}
-    /* Sidebar collapse — same shape as workspace panel collapse, mirrored on the left.
-       :not(.mobile-open) so the mobile slide-in overlay (handled in the max-width:640px
-       block above) is never targeted by these rules. */
+  }
+
+  /* Sidebar collapse breakpoint matches `_isDesktopWidth()` (min-width:641px) so
+     clicking the active rail icon in the tablet-portrait band (641–900px) actually
+     produces a visual change rather than silently flipping a class while CSS sits
+     out at @901. The rail itself becomes visible at min-width:641px, so any width
+     where the user can click the rail should also be a width where the collapse
+     rule applies. :not(.mobile-open) excludes the slide-in overlay below 641px. */
+  @media(min-width:641px){
     .layout.sidebar-collapsed .sidebar:not(.mobile-open){width:0 !important;min-width:0;opacity:0;transform:translateX(-14px);border-right-color:transparent;pointer-events:none;overflow:hidden;}
     .layout.sidebar-collapsed .sidebar .resize-handle{display:none;}
     /* Flash prevention: an inline <script> in index.html sets this dataset on
diff --git a/tests/test_sidebar_collapse_toggle.py b/tests/test_sidebar_collapse_toggle.py
index 410dbd1f..48ffcf75 100644
--- a/tests/test_sidebar_collapse_toggle.py
+++ b/tests/test_sidebar_collapse_toggle.py
@@ -88,6 +88,54 @@ class TestSidebarCollapseCSS:
             assert ":not(.mobile-open)" in selector, \
                 f"Collapse selector must exclude .mobile-open: {selector!r}"
 
+    def test_css_breakpoint_matches_js_isdesktopwidth(self):
+        # The CSS @media block guarding .layout.sidebar-collapsed must use the
+        # same min-width threshold as JS _isDesktopWidth(). Otherwise a click
+        # in the asymmetric band silently flips the class while CSS sits out
+        # — confusing for the user, broken for screen readers.
+        js_bp = re.search(
+            r"function\s+_isDesktopWidth[^}]*?matchMedia\('([^']+)'\)",
+            BOOT_JS, re.DOTALL,
+        )
+        assert js_bp, "Could not locate _isDesktopWidth matchMedia query in boot.js"
+        js_query = js_bp.group(1)
+
+        # Walk CSS to find which @media block encloses .layout.sidebar-collapsed
+        idx = CSS.index(".layout.sidebar-collapsed .sidebar:not(.mobile-open)")
+        # Search backward for the most recent unmatched `@media(...)`
+        prefix = CSS[:idx]
+        depth = 0
+        media_stack = []
+        last_open_media = None
+        i = 0
+        while i < len(prefix):
+            ch = prefix[i]
+            if ch == "@" and prefix[i:i + 6] == "@media":
+                end = prefix.index("{", i)
+                cond = prefix[i + 6:end].strip()
+                media_stack.append((cond, depth + 1))
+                i = end + 1
+                depth += 1
+                continue
+            if ch == "{":
+                depth += 1
+            elif ch == "}":
+                depth -= 1
+                while media_stack and media_stack[-1][1] > depth:
+                    media_stack.pop()
+            i += 1
+        last_open_media = media_stack[-1][0] if media_stack else None
+        assert last_open_media is not None, (
+            "Collapse rule must be inside an @media block to gate it correctly"
+        )
+        # Normalise whitespace for comparison
+        norm = lambda s: s.replace(" ", "")
+        assert norm(last_open_media) == norm(js_query), (
+            f"CSS @media('{last_open_media}') for .sidebar-collapsed must match JS "
+            f"_isDesktopWidth() ('{js_query}'). Otherwise clicks in the asymmetric band "
+            f"silently flip state without visual feedback."
+        )
+
 
 # ── boot.js contract ───────────────────────────────────────────────────────