Skip to content

fix: constrain x.com search form width after X layout update - #1355

Open
houzixiashanxiedaima wants to merge 1 commit into
tw93:mainfrom
houzixiashanxiedaima:fix/x-search-fullwidth
Open

fix: constrain x.com search form width after X layout update#1355
houzixiashanxiedaima wants to merge 1 commit into
tw93:mainfrom
houzixiashanxiedaima:fix/x-search-fullwidth

Conversation

@houzixiashanxiedaima

Copy link
Copy Markdown

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"] to position: fixed but never constrained its width. The width was implicitly provided by input[placeholder="Search"] { width: 150px }. X's redesign changed the form's inner container to width: 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. Chinese placeholder="搜索"), so the fallback was already fragile.

Fix

  • Anchor the width constraint on the form itself: width: 182px at rest, expanding on :focus-within.
  • Replace the locale-dependent input[placeholder="Search"] selector with the language-agnostic input[data-testid="SearchBox_Search_Input"] set to width: 100% so the input follows the form.
  • Add left: auto to 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 都会失效,本次一并修复。

问题: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)均正常。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant