sadpandajoe opened a new pull request, #43845:
URL: https://github.com/apache/superset/pull/43845

   ### 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:
   
   
![before](https://gist.githubusercontent.com/sadpandajoe/08639a5d1d3ac0ef1a9415961468c9bc/raw/c98237d3b947c07fd54c9f64d26285006cc480c5/before.png)
   
   ### AFTER
   
   At the same width, the title truncates with an ellipsis as expected, and the 
buttons remain cleanly separated from any metadata content:
   
   
![after](https://gist.githubusercontent.com/sadpandajoe/08639a5d1d3ac0ef1a9415961468c9bc/raw/c98237d3b947c07fd54c9f64d26285006cc480c5/after.png)
   
   ### 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:
   - [x] Changes UI
   - [ ] Includes DB Migration (follow approval process in 
[SIP-59](https://github.com/apache/superset/issues/13351))
     - [ ] 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
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to