mirror of
https://github.com/nesquena/hermes-webui.git
synced 2026-05-25 11:10:18 +00:00
Absorb starship-s commit cddd175: tighten composer spacing on 320px legacy phones
Pulls in the extra commit pushed to PR #1381 after our initial absorb. Adds a @media (max-width: 340px) block that compacts gutters (composer-wrap padding, composer-footer gap, composer-left gap) without shrinking the 44px touch targets. Plus its regression test. Verified with apply --check failed but actual apply succeeded — the failure was due to context drift from our earlier CSS specificity fix; the new lines landed at the correct location. test_mobile_layout.py: 47 tests passing.
This commit is contained in:
@@ -905,6 +905,13 @@
|
||||
.composer-mobile-config-action{box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;text-align:left;cursor:pointer;overflow:hidden;}
|
||||
.composer-mobile-config-action.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--text);}
|
||||
.composer-mobile-config-copy{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2;}
|
||||
/* The kicker labels (WORKSPACE / MODEL / REASONING / CONTEXT) duplicate the
|
||||
meaning the row icon already conveys, and at iPhone 14 width (390px) the
|
||||
~60px copy column truncates them. Hide them inside the open panel — the
|
||||
icon + value gives a cleaner two-row layout per pill. The .context row
|
||||
keeps its kicker because it stretches to 100% width and has more value
|
||||
content (usage / tokens / threshold). See #1381 review feedback. */
|
||||
.composer-mobile-config-action:not(.composer-mobile-context-action) .composer-mobile-config-kicker{display:none;}
|
||||
.composer-mobile-config-kicker{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
|
||||
.composer-mobile-config-value{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.composer-mobile-context-action{flex:1 0 100%;align-items:flex-start;cursor:default;overflow:visible;}
|
||||
@@ -1253,6 +1260,20 @@
|
||||
.empty-state p{font-size:13px;}
|
||||
.suggestion-grid{max-width:100%!important;}
|
||||
.suggestion{font-size:12px;padding:10px 12px;}
|
||||
}
|
||||
|
||||
@media (max-width: 340px){
|
||||
/* Extreme legacy-phone widths (e.g. 320px) cannot fit five 44px
|
||||
left-side touch targets plus the fixed send button with the normal
|
||||
phone spacing. Keep the single-row hierarchy and 44px targets, but
|
||||
tighten only the inter-button gutters so the config button remains
|
||||
fully visible instead of sliding under the send button. */
|
||||
.composer-wrap{padding-left:8px!important;padding-right:8px!important;}
|
||||
.composer-footer{gap:4px;}
|
||||
.composer-left{gap:2px;}
|
||||
}
|
||||
|
||||
@media (max-width: 640px){
|
||||
/* Approval card */
|
||||
.approval-card{padding-left:10px;padding-right:10px;}
|
||||
.approval-btns{gap:6px;}
|
||||
|
||||
@@ -652,6 +652,28 @@ def test_mobile_composer_left_children_do_not_shrink_into_each_other():
|
||||
".composer-workspace-group must reserve exactly one 44px slot on phones"
|
||||
|
||||
|
||||
def test_legacy_320px_composer_tightens_spacing_without_shrinking_targets():
|
||||
"""At 320px, keep 44px controls but use smaller gutters so config stays visible."""
|
||||
narrow_blocks = [block for block in _max_width_media_blocks(340) if ".composer-left" in block]
|
||||
assert narrow_blocks, "Missing 320px/legacy-phone composer spacing override"
|
||||
narrow_css = narrow_blocks[0]
|
||||
|
||||
footer = _declarations(_rule_body(narrow_css, ".composer-footer"))
|
||||
left = _declarations(_rule_body(narrow_css, ".composer-left"))
|
||||
wrap = _declarations(_rule_body(narrow_css, ".composer-wrap"))
|
||||
|
||||
assert footer.get("gap") == "4px", \
|
||||
"320px footer should tighten only the gutter between left controls and send"
|
||||
assert left.get("gap") == "2px", \
|
||||
"320px left controls need compact gutters to fit config before the fixed send button"
|
||||
assert wrap.get("padding-left") == "8px!important", \
|
||||
"320px composer should reclaim a little side padding without shrinking touch targets"
|
||||
assert ".send-btn{width:44px;height:44px;" in _composer_phone_media_block(), \
|
||||
"narrow spacing override must not shrink the 44px send button"
|
||||
assert ".composer-mobile-config-btn{box-sizing:border-box;position:relative;display:inline-flex!important;width:44px;height:44px" in _composer_phone_media_block(), \
|
||||
"narrow spacing override must not shrink the 44px mobile config button"
|
||||
|
||||
|
||||
def test_mobile_composer_workspace_switch_does_not_leave_empty_icon_slot():
|
||||
"""The phone footer should keep only the useful workspace files button inline."""
|
||||
mobile_css = _composer_phone_media_block()
|
||||
|
||||
Reference in New Issue
Block a user