Files
hermes-webui/tests/test_mobile_sidebar_header_icon_align.py
T
nesquena-hermes 7ad9707c4b fix(ui): align mobile sidebar close (X) with the new-conversation (+) button
On the mobile sidebar header the close (X) button rendered an 18px glyph — the
only 18px .panel-head-btn icon — sitting ~6px lower than the adjacent 14px
new-conversation (+) button, an inconsistent pair. Match the X glyph to 14px and
vertically center it on the ~41px panel-head row so both icons share one size and
baseline (top:calc(safe-top - 2px) keeps the existing safe-area offset so the X
still clears the notch, with no extra drawer spacing). 44x44 tap target kept for
mobile touch; mobile @media(max-width:640px) only, and the X is display:none on
desktop, so desktop is unaffected. + CHANGELOG + source-guard tests.
2026-07-05 06:40:26 +00:00

36 lines
1.6 KiB
Python

"""Mobile sidebar header: the close (X) button must visually match the
new-conversation (+) button — same 14px glyph, vertically aligned on the
panel-head row — instead of a larger 18px glyph sitting ~6px lower. Source guard.
Mobile-only (@media max-width:640px); desktop hides the X entirely.
"""
from pathlib import Path
ROOT = Path(__file__).resolve().parent.parent
STYLE = (ROOT / "static" / "style.css").read_text(encoding="utf-8")
def test_mobile_close_glyph_matches_plus_button_size():
# + button glyph is 14px (.panel-head-btn svg{width:14px}); the mobile X must match.
assert ".panel-head-btn svg{width:14px;height:14px" in STYLE
assert ".panel-head-btn.mobile-sidebar-close svg{width:14px;height:14px" in STYLE
# The old oversized 18px glyph must be gone.
assert ".panel-head-btn.mobile-sidebar-close svg{width:18px" not in STYLE
def test_mobile_close_is_centered_and_keeps_tap_target():
close_rule = STYLE[STYLE.index(".panel-head-btn.mobile-sidebar-close{"):]
close_rule = close_rule[: close_rule.index("}") + 1]
# Glyph centered in the button.
assert "align-items:center" in close_rule and "justify-content:center" in close_rule
# 44x44 tap target preserved for mobile touch.
assert "width:44px!important;height:44px!important" in close_rule
# Keeps the safe-area offset (so it still clears the notch) — no extra blank
# drawer padding.
assert "var(--app-titlebar-safe-top)" in close_rule
def test_mobile_close_hidden_on_desktop():
# Base (non-media) rule hides the X on desktop — this fix is mobile-only.
assert ".mobile-sidebar-close{display:none;}" in STYLE