fix(components): [transfer] prevent title width overflow by E66Crisp · Pull Request #23166 · element-plus/element-plus

E66Crisp · 2025-12-19T09:10:07Z

Please make sure these boxes are checked before submitting your PR, thank you!

Make sure you follow contributing guide English | (中文 | Español | Français).
Make sure you are merging your commits to dev branch.
Add some descriptions and refer to relative issues for your PR.

As you can see, when the title content is too long, it covers the elements on the right, and when the footer content is too long, it also fails to stay centered.

Expected behavior:

Summary by CodeRabbit

Style
- Improved Transfer header and footer layout, spacing, and text truncation for better alignment and visual consistency.
Tests
- Updated Transfer test to more reliably target the header count, improving test stability.
Chores
- Adjusted header markup to wrap title and count into semantic elements for clearer structure and easier maintenance.

pull-request-triage · 2025-12-19T09:10:14Z

👋 @E66Crisp, seems like this is your first time contribution to element-plus.
Please make sure that you have read our guidelines and code of conduct before making a contribution.

github-actions · 2025-12-19T09:10:17Z

pkg-pr-new · 2025-12-20T13:27:08Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@23166

npm i https://pkg.pr.new/element-plus/element-plus@23166

yarn add https://pkg.pr.new/element-plus/[email protected]

commit: 45566fd

github-actions · 2025-12-20T13:33:01Z

🧪 Playground Preview: https://element-plus.run/?pr=23166
Please comment the example via this playground if needed.

coderabbitai · 2025-12-29T06:01:30Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
✅ Review completed - (🔄 Check again to review again)

📝 Walkthrough

Walkthrough

Header title and checked-summary in the transfer panel were wrapped in dedicated spans with class names; related SCSS was adjusted to a flex layout and new classes added; a unit test selector was updated to target .el-transfer-panel__header-count.

Changes

Cohort / File(s)	Summary
Template `packages/components/transfer/src/transfer-panel.vue`	Header label markup split into two spans with classes (`header-title`, `header-count`) replacing previous text nodes inside the checkbox.
Styles `packages/theme-chalk/src/transfer.scss`	Header label changed to flex layout; added `.el-transfer-panel__header-title` (ellipsis) and `.el-transfer-panel__header-count` (spacing, font) rules; footer made flex and checkbox padding adjusted.
Tests `packages/components/transfer/__tests__/transfer.test.tsx`	Test selector updated to target `.el-transfer-panel__header-count` when asserting header count text.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

btea
rzzf

Poem

🐰 I hopped through spans to tidy the view,
A title tucked left, a bright count on cue,
Flexbox paws lengthen, margins in tow,
Tests now seek the little count they know,
A soft, happy hop — the panel's anew.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description includes all required checklist items checked off, provides a clear problem statement with visual evidence, and explains the expected behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The PR title 'fix(components): [transfer] prevent title width overflow' directly addresses the main issue of preventing header title overflow, which aligns with the primary change of wrapping the title in a span with text-ellipsis styling.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings (stacked PR)
📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Co-authored-by: rzzf <[email protected]>

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/theme-chalk/src/transfer.scss`:
- Around line 159-163: The rule violation is caused by the blockless `@include`
utils-ellipsis; immediately followed by a declaration, so update the
.#{$namespace}-transfer-panel__header-title rule to add a blank line after the
`@include` utils-ellipsis; and before the subsequent declaration (flex: 1) so the
declaration-empty-line-before lint rule is satisfied; locate the selector
.#{$namespace}-transfer-panel__header-title and insert one empty line between
the `@include` utils-ellipsis; line and the flex: 1 declaration.
- Around line 173-189: The footer styles for
.#{$namespace}-transfer-panel__footer currently remove left spacing and set an
unnecessary flex-direction; restore left offset by adding the same left padding
used in the header (e.g., padding-left: 15px or the equivalent CSS var) and
remove flex-direction: column to simplify the layout, and ensure the nested
.#{$namespace}-checkbox inherits/keeps its color rule — update the
.#{$namespace}-transfer-panel__footer block accordingly.

Co-authored-by: rzzf <[email protected]>

github-actions · 2026-02-22T10:04:50Z

@E66Crisp Thanks for your contribution! ❤️

fix(components): [transfer] fix header and footer layout issues

386350c

pull-request-triage Bot assigned E66Crisp Dec 19, 2025

pull-request-triage Bot added 1st contribution Their very first contribution Needs Review labels Dec 19, 2025

github-actions Bot added the Contribution::Community label Dec 19, 2025

test(components): [transfer] fix header count selector in customize test

efc6ad4

rzzf reviewed Jan 2, 2026

View reviewed changes

Comment thread packages/components/transfer/src/transfer-panel.vue Outdated

E66Crisp added 2 commits January 4, 2026 10:22

Update transfer-panel.vue

b5a207f

Update transfer-panel.vue

832ff74

E66Crisp requested a review from rzzf January 16, 2026 00:43

rzzf reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/theme-chalk/src/transfer.scss

Comment thread packages/components/transfer/src/transfer-panel.vue Outdated

E66Crisp and others added 2 commits January 17, 2026 14:52

Update packages/components/transfer/src/transfer-panel.vue

dbfbdff

Co-authored-by: rzzf <[email protected]>

Update transfer.scss

5e6afd4

E66Crisp requested a review from rzzf January 17, 2026 12:23

Dsaquel approved these changes Feb 17, 2026

View reviewed changes

rzzf approved these changes Feb 18, 2026

View reviewed changes

rzzf requested changes Feb 18, 2026

View reviewed changes

Comment thread packages/theme-chalk/src/transfer.scss Outdated

fix(components): [transfer] Update transfer.scss

f5f8a87

coderabbitai Bot reviewed Feb 22, 2026

View reviewed changes

Comment thread packages/theme-chalk/src/transfer.scss

Comment thread packages/theme-chalk/src/transfer.scss

E66Crisp added 2 commits February 22, 2026 16:29

fix(components): [transfer] Update transfer.scss

d43a92e

fix(components): [transfer] Update transfer.scss

5a9c9cc

E66Crisp requested a review from rzzf February 22, 2026 09:00

rzzf reviewed Feb 22, 2026

View reviewed changes

Comment thread packages/theme-chalk/src/transfer.scss

Comment thread packages/theme-chalk/src/transfer.scss Outdated

Comment thread packages/theme-chalk/src/transfer.scss

Comment thread packages/theme-chalk/src/transfer.scss Outdated

rzzf reviewed Feb 22, 2026

View reviewed changes

Comment thread packages/theme-chalk/src/transfer.scss

Apply suggestions from code review

5f769e3

Co-authored-by: rzzf <[email protected]>

E66Crisp and others added 3 commits February 22, 2026 17:52

Apply suggestion from @rzzf

e581516

Co-authored-by: rzzf <[email protected]>

Apply suggestion from @rzzf

895765c

Co-authored-by: rzzf <[email protected]>

revert: flex-grow

45566fd

rzzf approved these changes Feb 22, 2026

View reviewed changes

rzzf changed the title ~~fix(components): [transfer] fix header and footer layout issues~~ fix(components): [transfer] prevent title width overflow Feb 22, 2026

rzzf merged commit e5ec61d into element-plus:dev Feb 22, 2026
17 checks passed

element-bot mentioned this pull request Feb 28, 2026

D2M #23702

Merged

3 tasks

Uh oh!

Conversation

E66Crisp commented Dec 19, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

pull-request-triage Bot commented Dec 19, 2025

Uh oh!

github-actions Bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Dec 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Dec 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Feb 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

E66Crisp commented Dec 19, 2025 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Dec 19, 2025 •

edited

Loading

pkg-pr-new Bot commented Dec 20, 2025 •

edited

Loading

github-actions Bot commented Dec 20, 2025 •

edited

Loading

coderabbitai Bot commented Dec 29, 2025 •

edited

Loading