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

[Grid] Fix breakpoints not working with fractional pixels #1380

Merged
merged 1 commit into from
Jan 25, 2024
Merged

[Grid] Fix breakpoints not working with fractional pixels #1380

merged 1 commit into from
Jan 25, 2024

Conversation

hksalessio
Copy link
Contributor

Pull Request

📖 Description

I noticed that the FluentGrid component displayed grid items that were meant to be hidden at fractional pixel sizes.
For example, the FluentCard labeled 'xs="12" sm="6" Hidden="SmAndDown"' in following screenshot is hidden with a browser size '<= 599px' or '>= 600px and <= 959px' but not inbetween those values (i.e. 599.33px):
image

To fix this, I added .98px to the max-width breakpoints, as explained under following link:
https://stackoverflow.com/questions/54596219/why-do-some-max-width-media-queries-use-a-98px

✅ Checklist

General

  • I have added tests for my changes.
  • I have tested my changes.
  • I have updated the project documentation to reflect my changes.
  • I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

  • I have added a new component
  • I have added Unit Tests for my new compontent
  • I have modified an existing component
  • I have validate Unit Tests for an existing component

@vnbaaij vnbaaij requested review from dvoituron and vnbaaij January 25, 2024 11:00
@vnbaaij vnbaaij added this to the V4.3.2 milestone Jan 25, 2024
Copy link
Collaborator

@vnbaaij vnbaaij 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!

@vnbaaij vnbaaij merged commit bf12c60 into microsoft:dev Jan 25, 2024
2 checks passed
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.

3 participants