Skip to content

fix(sender): adjust slot-tag style to inline-flex (#1878)#1879

Open
yukrain wants to merge 1 commit into
ant-design:mainfrom
yukrain:fix/sender-slot-textarea
Open

fix(sender): adjust slot-tag style to inline-flex (#1878)#1879
yukrain wants to merge 1 commit into
ant-design:mainfrom
yukrain:fix/sender-slot-textarea

Conversation

@yukrain
Copy link
Copy Markdown

@yukrain yukrain commented Apr 26, 2026

🤔 这个变动的性质是?

  • 🆕 新特性提交
  • 🐞 Bug 修复
  • 📝 站点、文档改进
  • 📽️ 演示代码改进
  • 💄 组件样式/交互改进
  • 🤖 TypeScript 定义更新
  • 📦 包体积优化
  • ⚡️ 性能优化
  • ⭐️ 功能增强
  • 🌐 国际化改进
  • 🛠 重构
  • 🎨 代码风格优化
  • ✅ 测试用例
  • 🔀 分支合并
  • ⏩ 工作流程
  • ⌨️ 无障碍改进
  • ❓ 其他改动(是关于什么的改动?)

🔗 相关 Issue

#1878
#1878

💡 需求背景和解决方案

  1. 要解决的具体问题。
  2. 列出最终的 API 实现和用法。
  3. 涉及UI/交互变动建议提供截图或 GIF。
  1. https://ant-design-x.antgroup.com/components/sender-cn 修复 Sender 组件,点击Files添加文件时展示异常
  2. 增加 display inline-flex
  3. 截图
image

📝 更新日志

语言 更新描述
🇺🇸 英文 Fix display issue of file tags in the Sender input field
🇨🇳 中文 修复 Sender 输入框文件标签展示异常

Summary by CodeRabbit

  • 样式
    • 优化了发送者组件中标签容器的弹性布局显示效果,改善了标签的对齐、间距与换行行为,使标签在不同屏幕和内容下呈现更一致、紧凑的视觉表现;提升了整体界面的稳定性与可读性。

Review Change Stack

@github-actions
Copy link
Copy Markdown
Contributor

Prepare preview

@dosubot dosubot Bot added the bug Something isn't working label Apr 26, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 26, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3593f02f-9f22-4ec1-a552-6c2ae09bfa7b

📥 Commits

Reviewing files that changed from the base of the PR and between e33ba66 and f04a9b8.

📒 Files selected for processing (1)
  • packages/x/components/sender/style/slot-textarea.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/x/components/sender/style/slot-textarea.ts

📝 Walkthrough

Walkthrough

在 sender 组件样式中,将 slotTagCls 的 CSS 显示属性改为 display: inline-flex,调整槽标签容器的布局行为。

演进总结

slot-textarea.ts 样式文件中为 slotTagCls 添加了 display: inline-flex CSS 属性,将槽标签容器的显示方式改为 flex 布局,用于其子元素内容的排列。

变更一览

样式调整

Layer / File(s) Summary
样式修改
packages/x/components/sender/style/slot-textarea.ts
slotTagCls 中添加 display: inline-flex 属性,以启用 flex 布局对子元素的排列控制。

预估代码审查工作量

🎯 1 (微小) | ⏱️ ~2 分钟

庆祝诗

小小一行样式加,
Flex 布局展风采,
标签容器换新装,
排列整齐又舒坦。✨🐰

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题清晰准确地反映了主要变更内容:为Sender组件的slot-tag样式添加inline-flex显示属性以修复文件标签显示问题。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request updates the styling for the slot-textarea component by setting the display property of slot tags to inline-flex. A suggestion was made to also include alignItems: 'center' to ensure vertical alignment consistency for the tag's content.

justifyContent: 'center',
},
[slotTagCls]: {
display: 'inline-flex',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

在使用 display: 'inline-flex' 且设置了 height: '100%' 的标签组件时,建议同时添加 alignItems: 'center'。这可以确保标签内部的内容(如文本或图标)在垂直方向上居中对齐,避免内容在高度填满时出现偏移,从而保持与组件库中其他标签类元素(如 skill-tag)的样式一致性。

Suggested change
display: 'inline-flex',
display: 'inline-flex',
alignItems: 'center',

@yukrain yukrain force-pushed the fix/sender-slot-textarea branch from e33ba66 to f04a9b8 Compare May 11, 2026 03:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant