Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 10.38 GB / 31.89 GB
Browsers:
    Chrome: 110.0.5481.178
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.63)

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/distracted-keller-u1yi51?file=/example.tsx

Bug Description

Actual Behavior

This bug refers to an issue in the component library of Fluent v9, where the order of media queries is incorrect. Specifically, it may be that media queries for smaller screen sizes are placed after media queries for larger screen sizes, causing stylesheets to incorrectly override other styles. This can result in the interface displaying incorrectly or inconsistently on certain screens.

Expected Behavior

The media query should be sorted.

Maybe related: microsoft/griffel#129

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.