Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(header-panel): allow vertical overflow when expanded #17160

Merged

Conversation

metonym
Copy link
Collaborator

@metonym metonym commented Aug 13, 2024

Closes #17159

When HeaderPanel is expanded, the content is not vertically scrollable if there is overflow. See the original bug report for repro steps.

The root cause is that the --header-panel selector has overflow: hidden for the transition. However, the expanded state should allow vertical scrolling as needed.

The proposed fix is to set overflow-y: auto on the expanded state to only afford a scrollbar as needed.

Note that this fix should ideally be backported to v10.


Before

Screenshot 2024-08-13 at 9 15 02 AM

After

Screenshot 2024-08-13 at 9 15 18 AM

Changelog

Changed

  • fix(header-panel): allow vertical overflow when expanded

Testing / Reviewing

Copy link

netlify bot commented Aug 13, 2024

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 01ace4f
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/66bb8b50abe963000838fb31
😎 Deploy Preview https://deploy-preview-17160--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Aug 13, 2024

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 01ace4f
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/66bb8b505dfcdd0008f51f97
😎 Deploy Preview https://deploy-preview-17160--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Member

@emyarod emyarod left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me!

@tay1orjones
Copy link
Member

backport to v10 up at #17195

Merged via the queue into carbon-design-system:main with commit 1a40999 Aug 16, 2024
22 checks passed
@metonym
Copy link
Collaborator Author

metonym commented Aug 16, 2024

backport to v10 up at #17195

Excellent, thank you 🙏

@metonym metonym deleted the fix-header-panel-scroll branch August 16, 2024 19:06
Gururajj77 pushed a commit that referenced this pull request Aug 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: HeaderPanel does not allow vertical scrolling when expanded
3 participants