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(datatrak): RN-1594: avoid <SurveysImage> collisions, simplify layout #6098

Draft
wants to merge 8 commits into
base: release-2025-08
Choose a base branch
from

Conversation

jaskfla
Copy link
Contributor

@jaskfla jaskfla commented Feb 21, 2025

Issue RN-1594: Fix text clipping in survey select section of Dashboard

@jaskfla jaskfla changed the title refactor(datatrak): RN-1594: simplify <SurveysImage> layout, avoid collisions fix(datatrak): RN-1594: avoid <SurveysImage> collisions, simplify layout Feb 21, 2025
Copy link
Collaborator

@rohan-bes rohan-bes left a comment

Choose a reason for hiding this comment

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

Thanks @jaskfla!

Comment on lines +89 to +107
* Semantically meaningless, but using this to let `SurveysImage` overflow without the containing
* flexbox without increasing its height.
*/
const ImageWrapper = styled.div.attrs({ 'aria-hidden': true })`
// Center children, even if overflowing
align-items: center;
display: flex;
justify-content: center;
overflow: visible;

height: 0; // Let siblings alone determine height of parent...
width: fit-content; // ...but accommodate entire image width.

flex: 1;

@media (max-width: 20rem) {
display: none;
}
`;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Thanks for the comments here 🙏

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.

2 participants