fix(dashboard): prevent header metadata bar from overlapping action buttons at narrow widths

[sadpandajoe]

SUMMARY

Fixes a layout bug on the dashboard page header: at narrow browser widths, the header's metadata cluster (last-modified and owner/editor info, next to the certified/favorite/published badges) has no overflow protection. Once the dashboard title fully collapses via its own ellipsis behavior, further narrowing causes that metadata cluster to render past its allotted flex space and visually overlap the header's Edit/kebab-menu buttons instead of being clipped.

Root cause: buttonsStyles in PageHeaderWithActions (the flex wrapper around the certified badge, fave star, and metadata bar inside .title-panel) had no flex-shrink:0/overflow:hidden, so once its sibling (the title) shrank to its own minimum, the browser let this cluster's content render outside its box rather than clipping it.

Fix: add overflow: hidden to buttonsStyles so the cluster clips within its allotted space instead of overlapping neighboring header content.

This is a customer-reported issue affecting narrow desktop browser widths (not a mobile-specific problem).

BEFORE

At ~420px header width, the metadata info overlaps the Edit/kebab-menu buttons and the title is fully truncated:

AFTER

At the same width, the title truncates with an ellipsis as expected, and the buttons remain cleanly separated from any metadata content:

TESTING INSTRUCTIONS

• npm run playwright:storybook — new real-browser (Chromium) spec sweeps header width and asserts no bounding-box intersection between the metadata bar and the right-side action buttons; RED before this fix, GREEN after.
• npm run test -- PageHeaderWithActions — jsdom regression test guarding the added CSS property.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.42%. Comparing base (3258f5f) to head (cafb9b6).
⚠️ Report is 4 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #43845      +/-   ##
==========================================
- Coverage   79.42%   79.42%   -0.01%     
==========================================
  Files        2895     2895              
  Lines      167947   167947              
  Branches    38896    38896              
==========================================
- Hits       133388   133385       -3     
- Misses      32059    32062       +3     
  Partials     2500     2500              

Flag	Coverage Δ
javascript	74.93% <100.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🎪 Showtime is building environment on GHA for cafb9b6

[github-actions]

🎪 Showtime is building environment on GHA for cafb9b6