fix(tests): correct mobile CSS assertions to match refactored styling (#3851)

tests/test_issue2246_question_jump.py

@@ -48,13 +48,13 @@ def test_question_jump_expands_windowed_history_and_highlights_question():
     assert "msg-question-highlight" in UI_JS
 
 
-def test_question_jump_button_is_quiet_and_hidden_on_mobile():
+def test_question_jump_button_is_quiet_and_compact_on_mobile():
     assert ".msg-question-jump-btn" in STYLE_CSS
     assert "margin-left: auto;" in STYLE_CSS
     assert ".msg-question-highlight .msg-body" in STYLE_CSS
     assert "@keyframes question-highlight-pulse" in STYLE_CSS
     assert "@media (max-width: 600px)" in STYLE_CSS
-    assert ".msg-question-jump-btn { display: none; }" in STYLE_CSS
+    assert ".msg-question-jump-btn { padding: 3px 4px; }" in STYLE_CSS
 
 
 def test_question_jump_text_is_localized():

tests/test_issue3851_jump_to_question_mobile.py

@@ -4,18 +4,15 @@ Ensures that .msg-question-jump-btn remains visible on mobile screens
 instead of being completely hidden with display: none.
 """
 import re
-import pytest
+from pathlib import Path
+
+_CSS_PATH = Path(__file__).resolve().parents[1] / "static" / "style.css"
 
 
 def test_msg_question_jump_btn_mobile_not_display_none():
     """Assert the mobile media query for .msg-question-jump-btn does NOT hide it."""
-    css_path = 'static/style.css'
+    css_content = _CSS_PATH.read_text(encoding='utf-8')
 
-    with open(css_path, 'r', encoding='utf-8') as f:
-        css_content = f.read()
-
-    # Find the mobile media query that contains .msg-question-jump-btn
-    # Pattern: @media (max-width: 600px) { ... .msg-question-jump-btn ... }
     mobile_pattern = r'@media\s*\([^)]*max-width\s*:\s*600px[^)]*\)\s*\{[^}]*\.msg-question-jump-btn[^}]*\}'
     mobile_match = re.search(mobile_pattern, css_content, re.DOTALL)
 
@@ -24,8 +21,6 @@ def test_msg_question_jump_btn_mobile_not_display_none():
     )
 
     mobile_rule = mobile_match.group(0)
-
-    # Check that it does NOT contain display: none or display:none
     assert 'display: none' not in mobile_rule and 'display:none' not in mobile_rule, (
         f"Mobile rule for .msg-question-jump-btn should not have display: none. "
         f"Found: {mobile_rule}"
@@ -33,45 +28,25 @@ def test_msg_question_jump_btn_mobile_not_display_none():
 
 
 def test_msg_question_jump_btn_mobile_has_visible_styling():
-    """Assert the mobile media query provides visible styling for the button."""
-    css_path = 'static/style.css'
+    """Assert the mobile media query provides compact visible styling for the button."""
+    css_content = _CSS_PATH.read_text(encoding='utf-8')
 
-    with open(css_path, 'r', encoding='utf-8') as f:
-        css_content = f.read()
+    pattern = r'@media\s*\([^)]*max-width\s*:\s*600px[^)]*\)\s*\{[^}]*\.msg-question-jump-btn\s*\{([^}]*)\}'
+    match = re.search(pattern, css_content, re.DOTALL)
 
-    # Find the mobile media query that contains .msg-question-jump-btn
-    mobile_pattern = r'@media\s*\([^)]*max-width\s*:\s*600px[^)]*\)\s*\{[^}]*\.msg-question-jump-btn[^}]*\}'
-    mobile_match = re.search(mobile_pattern, css_content, re.DOTALL)
+    assert match is not None, "No .msg-question-jump-btn rule inside a mobile media query"
 
-    assert mobile_match is not None, (
-        "No mobile media query found for .msg-question-jump-btn"
-    )
-
-    mobile_rule = mobile_match.group(0)
-
-    # Check that it has some styling (padding, gap, or other properties)
-    # but specifically that it's not just setting display: none
-    has_padding = 'padding' in mobile_rule
-    has_gap = 'gap' in mobile_rule
-    has_height = 'height' in mobile_rule
-    has_width = 'width' in mobile_rule
-    has_some_property = has_padding or has_gap or has_height or has_width
-
-    assert has_some_property, (
-        f"Mobile rule for .msg-question-jump-btn should have visible styling "
-        f"(padding, gap, height, or width). Found: {mobile_rule}"
+    rule_body = match.group(1)
+    assert 'padding' in rule_body, (
+        f"Mobile .msg-question-jump-btn rule should have padding for compact styling. "
+        f"Found: {rule_body.strip()}"
     )
 
 
 def test_msg_question_jump_btn_text_span_hidden_on_mobile():
     """Assert that the text span (second child) is hidden on mobile."""
-    css_path = 'static/style.css'
+    css_content = _CSS_PATH.read_text(encoding='utf-8')
 
-    with open(css_path, 'r', encoding='utf-8') as f:
-        css_content = f.read()
-
-    # Find the mobile media query that hides the text span inside .msg-question-jump-btn
-    # Look for the pattern: span:last-child { display: none; }
     span_hide_pattern = r'\.msg-question-jump-btn\s+span:last-child\s*\{\s*display\s*:\s*none\s*;\s*\}'
     span_hide_match = re.search(span_hide_pattern, css_content, re.DOTALL)