fix(pie-toast): DSW-000 truncate text with css

[raoufswe]

Describe your changes (can list changeset entries if preferable)

• To truncate text in CSS, we typically need a specified width for the container to determine when truncation should happen. Currently, we use JavaScript in pie-toast to calculate the container's width and various action widths to ensure proper text truncation.
• This PR simplifies the solution using a CSS flexbox trick that allows text truncation without knowing the exact container width, as shown in this CodePen (Demo 3b).
• Updates the readme file for toast and notification to point to the docs site (cleanup)

Author Checklist (complete before requesting a review)

• [x] I have performed a self-review of my code
• [x] I have added thorough tests where applicable (unit / component / visual)
• [x] I have reviewed the PIE Storybook/PIE Docs PR preview
• [x] I have reviewed visual test updates properly before approving
• [x] If changes will affect consumers of the package, I have created a changeset entry.

Reviewer checklists (complete before approving)

Reviewer 1 - @fernandofranca

• [x] I have reviewed the PIE Storybook/PIE Docs PR preview
• [x] If there are visual test updates, I have reviewed them

Reviewer 2

• [x] I have reviewed the PIE Storybook/PIE Docs PR preview
• [x] If there are visual test updates, I have reviewed them

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 43dd6c50bf8ec076ade92393b376bbddceac1f0e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

| Name | Type | | -------------------------- | ----- | | @justeattakeaway/pie-toast | Patch | | pie-storybook | Patch | | @justeattakeaway/pie-webc | Patch | | wc-angular12 | Patch | | wc-nuxt2 | Patch | | wc-react17 | Patch | | wc-react18 | Patch | | wc-vue3 | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR