Fix: When the 'Quick Toggle' dropdown list is too long, the truncated…

[hzfi]

Fix: When the 'Quick Toggle' dropdown list is too long, the truncated content will be replaced with a scrollbar.

Summary by CodeRabbit

• Style

  • Improved dropdown item transitions for smoother hover and active-state movement.
  • Preserved the dropdown’s maximum item width for consistent layout.

• Bug Fixes

  • Improved dropdown positioning by automatically adjusting its placement when space is limited.

[coderabbitai]

📝 Walkthrough

Walkthrough

The rule content switcher now allows wider dropdown items, adds a transition for item interactions, and enables automatic overflow adjustment for the dropdown.

Changes

Rule content dropdown

Layer / File(s)	Summary
Dropdown presentation and positioning src/share/components/rule-content-switcher.tsx	Dropdown items now use a 180px maximum width and a transition while retaining hover translation; the dropdown enables automatic overflow adjustment.

Estimated code review effort: 2 (Simple) | ~5 minutes

Suggested reviewers: sylingd

🚥 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	The title clearly refers to the Quick Toggle dropdown overflow issue addressed by this PR, even though it is truncated.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/share/components/rule-content-switcher.tsx`:
- Around line 125-132: Remove the horizontal translate from the hover and
semi-dropdown-item-hover styles in the .semi-dropdown-menu .semi-dropdown-item
rule, preserving the existing hover background color and padding so items remain
fully visible within the clipped menu.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 360462db-d8c1-4595-8358-5b029d5065a4

📥 Commits

Reviewing files that changed from the base of the PR and between e555472 and 0df4f4f.

📒 Files selected for processing (1)

• src/share/components/rule-content-switcher.tsx

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Avoid translating items inside a horizontally clipped menu.

.semi-dropdown-menu sets overflow-x: hidden, but hovered items are shifted 8px to the right. This can clip the item’s right edge—particularly on platforms where the vertical scrollbar consumes horizontal space—so content may still be visually truncated.

Suggested fix

     &:hover,
     &.semi-dropdown-item-hover {
       background-color: var(--semi-color-secondary-light-default);
-      transform: translateX(8px)
     }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	.semi-dropdown-menu .semi-dropdown-item {
	padding: 8px 12px;
	&:hover,
	&.semi-dropdown-item-hover {
	background-color: var(--semi-color-secondary-light-default);
	transform: translateX(8px)
	}
	.semi-dropdown-menu .semi-dropdown-item {
	padding: 8px 12px;
	&:hover,
	&.semi-dropdown-item-hover {
	background-color: var(--semi-color-secondary-light-default);
	}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/share/components/rule-content-switcher.tsx` around lines 125 - 132,
Remove the horizontal translate from the hover and semi-dropdown-item-hover
styles in the .semi-dropdown-menu .semi-dropdown-item rule, preserving the
existing hover background color and padding so items remain fully visible within
the clipped menu.