Open
Conversation
英文文本比中文更长,footer 内容超出弹窗宽度(440px),导致 "Start Setup" 按钮被 overflow:hidden 裁切。 通过给 footer 添加 flex-wrap:wrap 并对按钮区域设置 margin-left:auto,空间不足时按钮自动换行到右侧,中文版 内容较短不受影响仍保持单行显示。
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.
问题描述
英文界面下,新手引导弹窗(onboarding tour)底部的「Start Setup」按钮被弹窗边框裁切,无法完整显示。
根本原因
弹窗宽度上限为
min(440px, 90vw),且设有overflow: hidden。英文文本(「Flip Page」「Exit」「Start Setup」)比中文(「翻页」「退出」「开始配置」)更长,footer 内容总宽度约 467px,超出容器上限,右侧按钮被裁切。修复方案
在
onboarding.css的 footer 中添加flex-wrap: wrap,并对按钮区域(.footer-right)设置margin-left: auto:影响范围
仅修改
frontend/src/styles/onboarding.css,不影响中文或其他语言的显示效果。