From 79b742ccdd70d6b72cf6a72e8239ca6a7235f3f9 Mon Sep 17 00:00:00 2001 From: Danyang Chen Date: Sun, 25 Oct 2026 18:44:12 +0800 Subject: [PATCH] fix(social): raise the two phone controls specificity was holding at desk size (#1156) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `.fs-face-actions .fs-btn-sm` is (0,2,0) and `.bt-menu .fs-me button.fs-link` is (0,3,1), so the phone block's `.fs-btn-sm` / `.fs-link` never reached them — the block is last in the sheet, which fixes ties, not a losing specificity. Both are now named in the block with the same selector, so they tie and the block's position decides: face-room header buttons 22px -> 40px, account menu links get `display:inline-flex` and a 40px hit area (their `min-height:0` was inside the winning rule). social.md names the two surfaces, so the "40 px" sentence stays true. --- changelog.d/1156-phone-overrides.fixed.md | 1 + docs/subsystems/social.md | 2 +- plugins/social/client.js | 2 +- plugins/social/test/group-phone.test.js | 14 ++++++++++++++ 4 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 changelog.d/1156-phone-overrides.fixed.md diff --git a/changelog.d/1156-phone-overrides.fixed.md b/changelog.d/1156-phone-overrides.fixed.md new file mode 100644 index 000000000..e10d7e0a0 --- /dev/null +++ b/changelog.d/1156-phone-overrides.fixed.md @@ -0,0 +1 @@ +Two controls in the social panel that stayed at their desk size on a phone are now touch-sized: the face-to-face room header's small buttons are 40 px instead of 22 px, and the account menu's links keep a 40 px hit area instead of collapsing to a 12 px text run (#1156). diff --git a/docs/subsystems/social.md b/docs/subsystems/social.md index 2eb56a813..aee723491 100644 --- a/docs/subsystems/social.md +++ b/docs/subsystems/social.md @@ -16,7 +16,7 @@ Face-to-face rooms (#83, #92) also live here: the primary entry is the sidebar * Everything in `plugins/social/` (entry `plugins/social/index.js` and any helpers). -At phone width (`<= 640 px`, the last block in `client.js's stylesheet`) this panel's buttons and inputs are 40 px, its row controls at least 32 px, long runs wrap inside their card, and the session dock clears the home indicator through `env(safe-area-inset-bottom,0px)` — 0 on this stack until the shell gains `viewport-fit=cover` (#647), so today it reads as a plain 6 px (#1147, #1149). +At phone width (`<= 640 px`, the last block in `client.js's stylesheet`) this panel's buttons and inputs are 40 px, its row controls at least 32 px, long runs wrap inside their card, and the session dock clears the home indicator through `env(safe-area-inset-bottom,0px)` — 0 on this stack until the shell gains `viewport-fit=cover` (#647), so today it reads as a plain 6 px (#1147, #1149). The two selectors a more specific desktop rule used to beat are named in the block as well — the face-room header's small buttons (22 px at a desk) and the account menu's links (`min-height:0` at a desk) — so the 40 px holds there too (#1156). ## Does not own diff --git a/plugins/social/client.js b/plugins/social/client.js index 1e228af7f..5e76e6fad 100644 --- a/plugins/social/client.js +++ b/plugins/social/client.js @@ -320,7 +320,7 @@ window.__ModuleLoader__.load({ .fs-wait-foot .fs-btn-primary{flex:1 1 auto;width:auto;min-width:0} .fs-wait[data-flybot=face-nobody] .fs-name{white-space:normal;overflow:visible;text-overflow:clip} .fs-fail{padding:0} -@media (max-width:640px){.fs-hold .fs-btn{height:40px;padding:0 16px;font-size:14px}.fs-hold .fs-hold-decide{flex:1 1 auto;justify-content:flex-end}.fs-btn,.fs-btn-sm{height:40px;padding:0 14px;font-size:13px}.fs-link,.fs-hold-more{display:inline-flex;align-items:center;min-height:40px;padding:0 2px;font-size:13px}.fs-icon{height:40px;min-width:40px}.fs-input,.fs-digits,.fs-link-input{height:40px;font-size:14px}.fs-paste{min-height:40px}.fs-remove{width:32px;height:32px}.fs-pending-item,.fs-past-head{min-height:40px}.fs-hold .fs-draft{overflow-wrap:anywhere}.fs-preview-foot .fs-btn,.fs-wait-foot .fs-btn{height:40px}.bt-flybot-session-dock{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}.fs-group-strip{margin:6px 8px}} +@media (max-width:640px){.fs-hold .fs-btn{height:40px;padding:0 16px;font-size:14px}.fs-hold .fs-hold-decide{flex:1 1 auto;justify-content:flex-end}.fs-btn,.fs-btn-sm{height:40px;padding:0 14px;font-size:13px}.fs-link,.fs-hold-more{display:inline-flex;align-items:center;min-height:40px;padding:0 2px;font-size:13px}.fs-icon{height:40px;min-width:40px}.fs-input,.fs-digits,.fs-link-input{height:40px;font-size:14px}.fs-paste{min-height:40px}.fs-remove{width:32px;height:32px}.fs-pending-item,.fs-past-head{min-height:40px}.fs-hold .fs-draft{overflow-wrap:anywhere}.fs-preview-foot .fs-btn,.fs-wait-foot .fs-btn{height:40px}.bt-flybot-session-dock{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}.fs-group-strip{margin:6px 8px}.fs-face-actions .fs-btn-sm{height:40px;padding:0 10px;font-size:13px}.bt-menu .fs-me button.fs-link{display:inline-flex;align-items:center;min-height:40px;padding:0 6px;font-size:13px}} ` function useStyles() { useEffect(() => { diff --git a/plugins/social/test/group-phone.test.js b/plugins/social/test/group-phone.test.js index 015530f03..5ab7db28d 100644 --- a/plugins/social/test/group-phone.test.js +++ b/plugins/social/test/group-phone.test.js @@ -126,3 +126,17 @@ test('the two footer buttons that out-specify `.fs-btn` are raised in the same b // block's (0,1,0), so `.fs-btn{height:40px}` cannot reach them however late it sits. assert.match(rule('.fs-preview-foot .fs-btn,.fs-wait-foot .fs-btn'), /height:40px/) }) + +test('the face-room header buttons beat their 22px rule (#1156)', () => { + // `.fs-face-actions .fs-btn-sm` is (0,2,0), so the block's `.fs-btn-sm` (0,1,0) never reached it; + // the same selector inside the block ties and, being last, wins. + assert.match(rule('.fs-face-actions .fs-btn-sm'), /height:40px/) +}) + +test('the account menu links keep a 40px hit area (#1156)', () => { + // `.bt-menu .fs-me button.fs-link` is (0,3,1) and sets `min-height:0`, so the block's `.fs-link` + // (0,1,0) was beaten outright. Same selector in the block, last, wins. + const link = rule('.bt-menu .fs-me button.fs-link') + assert.match(link, /min-height:40px/) + assert.match(link, /display:inline-flex/) +})