fix(pageheader): compensate the width of the overflow menu

[AlexanderMelox]

Closes #5806

This PR fixes the issue of the overflow menu hiding actions even when there is enough space. I don't know if this is the best fix for it maybe @lee-chase can help out.

What did you change?

packages/ibm-products/src/components/PageHeader/PageHeader.tsx

How did you test and verify your work?

By opening the build and resizing the browser

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	c95135c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/66d86255df293c000858734e
😎 Deploy Preview	https://deploy-preview-5929--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AlexanderMelox]

Screen caps showing the fix

Screen.Recording.2024-08-22.at.3.36.13.PM.mov

Screen.Recording.2024-08-22.at.3.37.07.PM.mov

[lee-chase]

Looks good to me, only concern would be the button size changing.

[matthewgallo]

Can you see if you can send back a ref to the overflow menu from the ActionBar's onWidthChange callback? Then in PageHeader's handleActionBarWidthChange you can check for the width of the returned ref.

[AlexanderMelox]

Can you see if you can send back a ref to the overflow menu from the ActionBar's onWidthChange callback? Then in PageHeader's handleActionBarWidthChange you can check for the width of the returned ref.

Used a ref for dynamic width

[matthewgallo]

While we're still using both TS types and prop types, can you update the the prop types for the components that now have new props?

[AlexanderMelox]

Makes sense, added the proptypes

[devadula-nandan]

can you check CI / avt-runner (3) (pull_request) -> Run AVT? it reported as pass, but the page header avt's failed, which needs to be re-aligned after this fix.