fix(web): 修复移动端顶栏与近期热门的两处布局挤压 - #253
Merged
Merged
Conversation
移动端（≤860px）侧边栏变为横向顶栏后，网盘切换器的 .ws-menu 仍为内联展开， 会参与 flex 主轴宽度计算：展开时切换器 125px→161px，挤压 .brand 175px→139px， 导致「Mediary Scout」字标折行、顶栏高度 49px→68px。改为绝对定位（右锚定） 脱离文档流，与上方 .account-identity-menu 对身份下拉的既有做法一致。 窄屏（≤376px）「近期热门」标题与三个 pill 共行需 329px，而 .trending-head 仅余约 320px（同行还有「每日更新 · 来自 TMDB」），末个 pill 单独折行且左对齐 于标题下方。让标题独占一行、三个 pill 同行（合计 248px，可缩至约 300px）。 未放宽到 390px：iPhone 12–15 有约 342px，四者同行观感更佳。 按宽度而非 860px 移动断点限定：窄桌面窗口存在同样挤压。 验证：390×844 视口截图前后对比确认两处均已修复；`npm run build:web` 通过。
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Address the workspace switcher sizing issue before approval.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Fixes two mobile CSS layout issues: workspace menu expansion and narrow-screen trending tabs.
Changes:
- Positions the mobile workspace menu absolutely.
- Adds a ≤376px layout for trending controls.
File summaries
| File | Review |
|---|---|
apps/web/app/globals.css |
Long custom storage labels may still expand the switcher and cause narrow-screen overflow; allow the switcher to shrink while keeping the menu absolute. |
Review details
Suppressed comments (2)
apps/web/app/globals.css:1344
- These three declarations duplicate the global
.workspace-switcher .ws-labelrule atapps/web/app/globals.css:3532-3535, so this media block adds no behavior and creates a second source of truth. Remove the duplicate block; the existing rule already applies at this breakpoint.
.workspace-switcher .ws-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
apps/web/app/globals.css:1343
- The
max-widthcap only constrains.ws-menu; each.ws-tabstill has the defaultmin-width: auto. A long custom storage label can therefore keep a min-content width larger than the cap and paint outside the dropdown, despite the new.ws-labelellipsis rule. Setmin-width: 0on the tab (and label) so the flex row can shrink and the phone-safe cap is effective.
.workspace-switcher .ws-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- Files reviewed: 1/1 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+1320
to
+1321
| position: relative; | ||
| flex: 0 0 auto; |
Copilot 评审指出 flex:0 0 auto 让整个切换器不可收缩。storage.label 是 connected-storages 表里的自由文本（workspace-switcher-loader.tsx:31 无长度 约束），长标签会把切换器撑出顶栏。 实测复现（368px 视口，标签「我的家庭影音收藏主力盘-4K原盘专用」）： 切换器 125px→280px，右边缘 417 > 视口 368，docW=417，整页横向滚动。 改为 flex:0 1 auto + min-width:min(125px,34vw)： - 下限保住常规标签（.brand 同为默认 0 1 auto，两者竞争会无谓压窄切换器） - 仅超长标签截断 .ws-label 补 min-width:0（flex item 默认 min-width:auto 会拒绝收缩到内容宽度 以下，ellipsis 不触发）；移除重复的 ellipsis 三属性，桌面段 3539 行已有。 实测三档（368px）： 115盘 125px right=334 brand=175 无溢出 未截断 103164004 125px right=334 brand=175 无溢出 未截断 超长标签 182px right=334 brand=118 无溢出 已截断 build:web 通过。
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.
用户反馈的移动端两处布局问题（软路由
192.168.100.1:3300，390×844）。问题一：展开网盘切换器会把品牌区挤到折行
移动端（≤860px）侧边栏变为横向顶栏，但网盘切换器的
.ws-menu仍是内联展开 —— 在固定宽度的竖向侧边栏里无害，到了横向 flex 顶栏就会参与主轴宽度计算：.workspace-switcher.brand.brand被挤到 139px 后「Mediary Scout」字标折成两行、副标题也折行、logo 被推歪。修法：
.ws-menu改绝对定位脱离文档流，.workspace-switcher加position:relative+flex:0 0 auto。右锚定（right:0）保证在 ≤390px 视口向左展开不出界。这与上方几条规则里.sidebar-top-identity .account-identity-menu对身份下拉的既有做法一致。问题二：窄屏「热门动漫」单独折行
368px 实测：「近期热门」71px + 三个 pill 76×3 + 3×10px gap = 329px，而
.trending-head只余约 320px（同行还有「每日更新 · 来自 TMDB」），末个 pill 单独掉到第二行并左对齐于标题下方，参差且容易漏看。修法：329px 的需求对应约 376px 视口，故
≤376px时标题独占一行、三个 pill 同行（合计 248px，可缩至约 300px）。刻意不放宽到 390px：iPhone 12–15 有约 342px 可用，四者同行观感更好，不该一并改掉。断点按宽度而非 860px 移动断点限定 —— 窄桌面窗口存在同样挤压。
验证
npm run build:web通过已知未做
以上验收在开发态下完成，未在软路由真机跑构建产物。按项目铁律 4，合并后建议部署再确认一遍。
一处自我修正
中途曾误判下拉菜单「飘了、未对齐按钮」，量测后
summary.right与menu.right均为 334，右边缘严丝合缝；菜单宽 161 比按钮 125 多出的 36px 是右锚定下拉的正常形态。已按无需改动处理。