fix: constrain x.com search form width after X layout update - #1355
Open
houzixiashanxiedaima wants to merge 1 commit into
Open
fix: constrain x.com search form width after X layout update#1355houzixiashanxiedaima wants to merge 1 commit into
houzixiashanxiedaima wants to merge 1 commit into
Conversation
houzixiashanxiedaima
force-pushed
the
fix/x-search-fullwidth
branch
from
August 18, 2026 02:03
2f2b2c2 to
7236e93
Compare
问题:X 近期改版后,Pake 封装应用中被固定到右上角的搜索框
变成了横贯页面顶部的通栏(form 宽约 1652px / 视口 1667px),
遮挡内容。
原因:旧样式只把 form 设为 position:fixed 却未约束其宽度,
宽度依赖 input[placeholder="Search"] { width:150px } 兜底;
但 X 改版后搜索表单内部容器变为 width:100% 拉伸,form 不再
收缩包裹 input,fixed 元素的包含块又是视口,于是被拉满整行。
此外 input[placeholder="Search"] 选择器仅匹配英文界面,在中文
(placeholder="搜索")等所有非英文 locale 下永久失配,本就脆弱。
修复:将宽度约束直接锚定在 form 上(常态 182px,focus-within
展开),input 改用与语言无关的 data-testid="SearchBox_Search_Input"
选择器并 width:100% 跟随 form。已在登录态 x.com 中文界面实测:
常态右上角 182px、聚焦展开 374px(窄屏 280px)均正常。
houzixiashanxiedaima
force-pushed
the
fix/x-search-fullwidth
branch
from
August 18, 2026 02:11
7236e93 to
42515db
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
After a recent X/Twitter layout change, the search box that Pake pins to the top-right corner of wrapped X apps stretches into a full-width bar spanning the entire top of the page (measured form width ~1652px vs ~1667px viewport), overlapping the timeline content.
Root cause
The old rules set the search
form[role="search"]toposition: fixedbut never constrained its width. The width was implicitly provided byinput[placeholder="Search"] { width: 150px }. X's redesign changed the form's inner container towidth: 100%, so the form no longer shrink-wraps its input; since a fixed element's containing block is the viewport, it expands to the full row. Additionally,input[placeholder="Search"]only matches the English UI — it never matches non-English locales (e.g. Chineseplaceholder="搜索"), so the fallback was already fragile.Fix
formitself:width: 182pxat rest, expanding on:focus-within.input[placeholder="Search"]selector with the language-agnosticinput[data-testid="SearchBox_Search_Input"]set towidth: 100%so the input follows the form.left: autoto keep the form pinned to the right edge.Verification
Tested live on a logged-in x.com session with a Chinese UI: at rest the box sits in the top-right corner at 182px; on focus it expands to 374px (280px on the narrower 1000–1264px breakpoint). Both behave correctly. Note the old
input[placeholder="Search"]selector fails for every non-English locale, which this change also fixes.问题
X/Twitter 近期改版后,Pake 封装应用中被固定到右上角的搜索框会被拉伸成横贯页面顶部的通栏(实测 form 宽约 1652px / 视口约 1667px),遮挡时间线内容。
原因
旧规则把搜索
form[role="search"]设为position: fixed,却从未约束其宽度,宽度靠input[placeholder="Search"] { width: 150px }隐式兜底。X 改版后表单内部容器变为width: 100%,form 不再收缩包裹 input;而 fixed 元素的包含块是视口,于是被拉满整行。此外input[placeholder="Search"]只匹配英文界面,在中文(placeholder="搜索")等所有非英文 locale 下永久失配,本就脆弱。修复
form上:常态width: 182px,:focus-within时展开。input[data-testid="SearchBox_Search_Input"](width: 100%)替换input[placeholder="Search"],让 input 跟随 form 宽度。left: auto保证 form 贴右边缘。验证
已在登录态 x.com 中文界面实测:常态右上角 182px,聚焦展开 374px(1000–1264px 窄屏断点为 280px),均正常。旧的
placeholder选择器对所有非英文 locale 都会失效,本次一并修复。