fix(react): prevent text overflow in UI components (#529)

[Dushmilan]

Add text overflow handling across Oxygen UI components:

• PageTitleHeader: ellipsis truncation for long titles
• PageTitleSubHeader: word-break wrapping for long subheaders
• StatCard: ellipsis truncation on value/label with minWidth:0 flex fix
• Form.CardButton: overflow hidden to contain card content
• Form.ElementWrapper: ellipsis truncation on FormLabel
• SidebarItemLabel: ellipsis truncation on sidebar item primary text
• ListingTableCell: overflow-wrap break-word baseline with truncate override

Purpose

Related Issues

• N/A

Related PRs

• N/A

Checklist

• Followed the CONTRIBUTING guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Unit tests provided. (Add links if there are any)
• Storybook stories updated/added (if applicable)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines?
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets?

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f0b45efa-a534-4d7c-a1fe-03575137ff5b

📥 Commits

Reviewing files that changed from the base of the PR and between 3ed8c2c and a4db3fa.

📒 Files selected for processing (7)

• packages/oxygen-ui/src/components/Form/CardButton.tsx
• packages/oxygen-ui/src/components/Form/ElementWrapper.tsx
• packages/oxygen-ui/src/components/ListingTable/ListingTable/ListingTableCell.tsx
• packages/oxygen-ui/src/components/PageTitle/PageTitleHeader.tsx
• packages/oxygen-ui/src/components/PageTitle/PageTitleSubHeader.tsx
• packages/oxygen-ui/src/components/Sidebar/SidebarItemLabel.tsx
• packages/oxygen-ui/src/components/StatCard/StatCard.tsx

---

📝 Walkthrough

Summary

Adds consistent text-overflow handling across Oxygen UI React components, including ellipsis truncation for titles, labels, sidebar text, and stat values; improved wrapping for subheaders and table cells; and overflow containment for form card buttons.

Impact

Improves readability and layout stability when component text exceeds available space, especially in constrained or responsive layouts.

Walkthrough

Updated Oxygen UI styling to handle constrained text and content. Card buttons now clip overflowing content. Form labels, table cells, page headers, sidebar labels, and stat card values support truncation or ellipsis behavior. Page subheaders now allow long words to break within constrained layouts. No component APIs or exported typings changed.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the PR’s main change: preventing text overflow in UI components.
Description check	✅ Passed	The description is mostly complete and matches the template, with a clear change summary, related sections, checklist, and security checks.
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.}