fix(settings/auth): prevent description tip from overlapping toggle column#757
Merged
Conversation
…olumn The Login Methods (登录方式) tab renders each setting row as a flex container whose .settings-label (title + tip) sits on the left and .settings-content (the toggle list) on the right. The shared layout in user/Setting.vue doesn't put min-width: 0 on .settings-label though, so when its child .settings-tip carries max-width: 440px the label's flex preferred size resolves to ~440px. On the 50%-width dialog there's roughly ~400-420px of content area to share between the two columns, and the unlocked label squeezes the toggle column out, visually overlapping the tip text '勾选本站登录页面允许使用的登录方式。至少需要保留一种…' with the provider labels (邮箱 / Google / GitHub / 手机号 / 微信). Pin this panel's layout from inside Auth.vue (scoped) without touching the shared layout other panels rely on: * Let .settings-label grow into all remaining row space and shrink below intrinsic min-content (flex: 1 1 0; min-width: 0). * Mark the right column as content-sized (flex: 0 0 auto) so it never gets pushed past the gutter. * Reduce the toggle list's min-width from 240px to 220px — still enough for the longest provider label plus the el-switch, but no longer wide enough to starve the description tip on narrow dialogs. No template / behaviour changes; this is a CSS-only fix scoped to Auth.vue's existing <style lang="scss" scoped>.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
nexior | 8390273 | Commit Preview URL Branch Preview URL |
May 16 2026, 08:46 AM |
Germey
approved these changes
May 16, 2026
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
2 participants
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.
Summary
In the Settings → 登录方式 (Login Methods) tab the description text for 启用的登录方式 visually overlaps with the right-hand switch column (邮箱 / Google / GitHub / 手机号 / 微信). The tip text bleeds past the gutter into the area where the provider labels render — see the original report screenshot.
Root cause
user/Setting.vuedefines the shared row layout via:deep(.settings-item):.settings-label(which contains the tip) has nomin-width: 0, so the tip'smax-width: 440pxresolves to the label's preferred flex size of ~440px. On the 50%-width dialog the actual content area for a row is only ~400–420px, so flex shrinking has to fight the label's intrinsic min-content. The right column.auth-providers-list(Auth.vue) was also pinned tomin-width: 240px— wide enough that the two columns can't both fit, pushing the label content past the gutter and visually overlapping the toggles.Fix
CSS-only and scoped to Auth.vue so other settings panels are untouched:
:deep(.settings-item) .settings-label { flex: 1 1 0; min-width: 0; }— let the label column grow into remaining row space and shrink below intrinsic min-content..auth-providers-content { flex: 0 0 auto; }— keep the right column at its content size so it can never push past the gutter..auth-providers-list { min-width: 220px; }(was 240px) — still plenty for the longest label (GitHub) plus theel-switch, but no longer wide enough to starve the tip.Verification
@media (max-width: 640px)inuser/Setting.vue) flips the row to a column anyway, so the new rules are a no-op on phones.enabledtoggles or thedefault_providerselect.This pull request was generated and committed by the GitHub Copilot coding agent on behalf of @CQUPTQiCu.