style(nav-rail): enhance reorder icon visibility and placement

[ThishankaM]

• Increase drag‑handle font size to 14px.
• Use primary theme color for the icon.
• Add background using token.colorBgContainer.
• Apply border radius, padding, and centered flex alignment.
• Improves contrast and discoverability in both light and dark themes.

Summary by CodeRabbit

• Style
  • Updated the draggable navigation handle to use the theme’s primary color and container background, with a small rounded corner and 2px of padding.
  • Increased the handle’s font size from 10px to 14px and centered its contents for a more prominent, consistent appearance across themes.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: Worklenz/worklenz/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: 58c5ef4a-8d57-4203-b8cb-48f13020da92

📥 Commits

Reviewing files that changed from the base of the PR and between 7921293 and 5c5bb35.

📒 Files selected for processing (1)

• worklenz-frontend/src/components/nav-rail/NavRailItem.tsx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The nav rail drag handle now uses a 14px icon in the theme’s primary color. It has a container background, a small theme-based border radius, and 2px padding. Its contents are centered.

Changes

Nav rail drag handle

Layer / File(s)	Summary
Drag handle appearance worklenz-frontend/src/components/nav-rail/NavRailItem.tsx	The drag handle now uses a larger primary-colored icon on a container background, with a small theme-based border radius and 2px padding. Its contents are centered.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~2 minutes

Change: Other

Merge Risk: ⚪ Minimal · up to 5c5bb

The changes are limited to the navigation drag handle’s appearance and alignment; no actionable merge risk is identified from the supplied context.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: improving the navigation rail reorder icon's visibility and placement.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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.}

[chamikaJ]

Thanks for the focused visibility improvement. The theme-aware foreground and background token choices look good, and the CI/security checks are passing.\n\nPlease replace the hardcoded with the appropriate Ant Design radius token (for example ) so the handle remains aligned with the product design system if token values change. Once that is updated, this is good to merge.

[chamikaJ]

Clarification to the requested change: replace the hardcoded borderRadius: 4 with token.borderRadiusSM.

[chamikaJ]

Re-reviewed the follow-up commit: the drag handle now uses token.borderRadiusSM, preserving design-token consistency. The focused visual change is safe and all CI and security checks are passing.