-
Notifications
You must be signed in to change notification settings - Fork 331
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: Formatted network request payload has weird formatting #8603
Conversation
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Summary
- Resolved Class Name Conflict: Addressed a class name conflict between
react-command-palette
andreact-syntax-highlighter
by overriding theatom-input
class styles with higher specificity infrontend/src/index.css
.
Potential Pitfalls
- Global CSS Overrides: Ensure that the global CSS overrides do not unintentionally affect other components or styles within the application.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
awesome, this fixes the issue for a session that currently displays this behavior. https://app.highlight.io/1/sessions/vRDmvFdZpssWFOwu1NCGPN03oTI1?network-resource-id=341
thank you for your contribution!
fixes #8560
/claim #8560
Summary
There was a class name conflict between two third party components
The react-command-pallete library comes with a default theme called "atom" that has a declaration for "atom-input"
This theme is imported whenever the react-command-pallete is used and was thus globally available.
Our graphql variable "Type" also has the class name atom-input and therefore inherits the global styling for the default
atom theme from the react-command-pallete component.
My proposed solution just overrides those styles by introducing a global declaration with higher specificity that
unsets the css declaration. I';ve seen similar done for the atom-overlay class.
Default atom style from the command-pallete library.
This is imported as a global css by the library.
![Screenshot 2024-05-17 at 12 03 49 PM](https://private-user-images.githubusercontent.com/119384208/331603645-7ea16ae4-f8c6-443e-b1c4-2ad83591f493.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIyNjc5NjksIm5iZiI6MTcyMjI2NzY2OSwicGF0aCI6Ii8xMTkzODQyMDgvMzMxNjAzNjQ1LTdlYTE2YWU0LWY4YzYtNDQzZS1iMWM0LTJhZDgzNTkxZjQ5My5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyOVQxNTQxMDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kZjkwNzU5OTc5NGUwY2ZmZGE2MGEwMzU1ZGNiMGFiNzJjMTVlNjIzNDJhNWNkOTY1ZWM5MDM3ZGRiNjExYzJhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.J7_GNKwof5E4M1EOK_9GJCaKj9FpcN9ngslchZatGjs)
Fixed output
How did you test this change?
Click testing
Are there any deployment considerations?
No
Does this work require review from our design team?
No