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(react): Make TwoColumnPanel wrap to prevent content from getting cut out #952

Merged
merged 4 commits into from
Mar 15, 2023

Conversation

dequejosie
Copy link
Contributor

closes #786

@dequejosie dequejosie requested a review from a team as a code owner March 15, 2023 14:46
@github-actions
Copy link
Contributor

Preview branch generated at https://two-column-panel-header.d1gko6en628vir.amplifyapp.com

@dequejosie dequejosie marked this pull request as draft March 15, 2023 14:50
Copy link
Member

@scurker scurker left a comment

Choose a reason for hiding this comment

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

Great work @dequejosie!

Just one small tweak is needed to make the padding consistent when it wraps. Since the line-height was removed, we need to set the padding for .TwoColumnPanel__Header so it doesn't look squished when content wraps:

padding: calc(var(--space-small) - 2px);

The -2px is to account for the borders that are outside of the element and will make it line up with the left panel when there's only one line of text.

@dequejosie dequejosie marked this pull request as ready for review March 15, 2023 15:32
@dequejosie dequejosie dismissed scurker’s stale review March 15, 2023 15:32

changed the padding

@dequejosie
Copy link
Contributor Author

Screen Shot 2023-03-15 at 11 31 59 AM

@dequejosie dequejosie merged commit ca04237 into develop Mar 15, 2023
@dequejosie dequejosie deleted the two-column-panel-header branch March 15, 2023 18:04
@github-actions
Copy link
Contributor

Preview branch generated at https://two-column-panel-header.d1gko6en628vir.amplifyapp.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TwoColumnPanel: content overlap at 200% zoom
2 participants