Sidebar: Change the word-break to normal to handle multi-line item names

[sofiacarvalho-ifx]

By creating this pull request you agree to the terms in CONTRIBUTING.md.
https://github.com/Infineon/.github/blob/master/CONTRIBUTING.md
--- DO NOT DELETE ANYTHING ABOVE THIS LINE ---

CONTRIBUTING.md also tells you what to expect in the PR process.

Description:

• Changed the word-break to normal to handle multi-line item names

Reference:
#2475

📦 Published PR as canary version: 40.7.0--canary.2481.34226755075.0

✨ Test out this PR locally via:

npm install example-generator@40.7.0--canary.2481.34226755075.0
npm install angular-module-example@40.7.0--canary.2481.34226755075.0
npm install angular-standalone-example@40.7.0--canary.2481.34226755075.0
npm install html-cdn-example@40.7.0--canary.2481.34226755075.0
npm install html-vite-example@40.7.0--canary.2481.34226755075.0
npm install react-example@40.7.0--canary.2481.34226755075.0
npm install vue-example@40.7.0--canary.2481.34226755075.0
npm install @infineon/infineon-design-system-stencil@40.7.0--canary.2481.34226755075.0
npm install @infineon/dds-tooling@40.7.0--canary.2481.34226755075.0
npm install @infineon/design-system-mcp@40.7.0--canary.2481.34226755075.0
npm install @infineon/infineon-design-system-angular@40.7.0--canary.2481.34226755075.0
npm install @infineon/infineon-design-system-react@40.7.0--canary.2481.34226755075.0
npm install @infineon/infineon-design-system-vue@40.7.0--canary.2481.34226755075.0
# or 
yarn add example-generator@40.7.0--canary.2481.34226755075.0
yarn add angular-module-example@40.7.0--canary.2481.34226755075.0
yarn add angular-standalone-example@40.7.0--canary.2481.34226755075.0
yarn add html-cdn-example@40.7.0--canary.2481.34226755075.0
yarn add html-vite-example@40.7.0--canary.2481.34226755075.0
yarn add react-example@40.7.0--canary.2481.34226755075.0
yarn add vue-example@40.7.0--canary.2481.34226755075.0
yarn add @infineon/infineon-design-system-stencil@40.7.0--canary.2481.34226755075.0
yarn add @infineon/dds-tooling@40.7.0--canary.2481.34226755075.0
yarn add @infineon/design-system-mcp@40.7.0--canary.2481.34226755075.0
yarn add @infineon/infineon-design-system-angular@40.7.0--canary.2481.34226755075.0
yarn add @infineon/infineon-design-system-react@40.7.0--canary.2481.34226755075.0
yarn add @infineon/infineon-design-system-vue@40.7.0--canary.2481.34226755075.0

[github-actions]

Storybook Preview

• Storybook

Preview Links for Deployed Examples

• HTML CDN Example
• HTML Vite Example
• Angular Example (Module)
• Angular Example (Standalone)
• React Example
• Vue Example

Version: 40.7.0--canary.2481.34226755075.0

[tishoyanchev]

@sofiacarvalho-ifx
When word-break is 'normal', then the text overflows when it's long with no space, eg: wwwwwwwwwwwwww
I am not sure there is a css solution to this issue. Another alternative is to add a small javascript logic that detects when the text overflows, and then you toggle a class which sets the word-break to 'break-all' again.