fix(tabs): The tab was not fully displayed when scrollIntoView

[l123wx]

English Template / 英文模板

• 我已阅读并遵循了贡献文档中的PR指南.

PR类型 (请至少选择一个)

• Bugfix
• Feature
• Code style update
• Refactor
• Test Case
• TypeScript definition update
• Document improve
• CI/CD improve
• Branch sync
• Other, please describe:

PR 描述

原来按钮和 tab 列表的间距是通过 div.semi-tabs-bar-arrow 上的 margin-left/right 来实现的，而在存在溢出元素时，div.semi-tabs-bar-arrow 显示，margin 出现，在没有溢出元素时，div.semi-tabs-bar-arrow 不显示，margin 也不会出现，最终导致 tab 列表的宽度发生变化，这也是导致 tab scrollIntoView 之后显示不完全的根本原因

semi-design/packages/semi-ui/tabs/TabBar.tsx

Lines 147 to 155 in 08c76a5

	if (isEmpty(items)) {
	return (
	<Button
	disabled={true}
	icon={icon}
	theme="borderless"
	/>
	);
	}

semi-design/packages/semi-ui/tabs/TabBar.tsx

Lines 200 to 207 in 08c76a5

	<div role="presentation" className={arrowCls} onClick={(e): void => this.handleArrowClick(items, pos)}>
	<Button
	disabled={disabled}
	icon={icon}
	// size="small"
	theme="borderless"
	/>
	</div>

/

更新日志

🇨🇳 Chinese

• Fix: 修复 tab 在 scrollIntoView 后显示不完整的问题

---

🇺🇸 English

• Fix: Fixed the issue where the tab was not fully displayed when scrolled into view.

检查清单

• 已增加测试用例或无须增加
• 已补充文档或无须补充
• Changelog已提供或无须提供

其他要求

• 本条 PR 不需要纳入 Changelog

附加信息

Before

2024-05-20.20-47-07.mp4

After

2024-05-20.21-03-49.mp4

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b979802:

Sandbox	Source
pr-story	Configuration