Flex applies responsive width with inline styles, such as "max-width: var(--responsive-width-xl)" for maxWidth="xl" prop. We should create global classes in the appropriate SCSS file in the "styles" folder for max-width, since they are commonly used in Once UI. Then, change the logic in both the Grid and Flex for applying the classes instead of inline styles.
This would improve code structure and consistency of the DOM and slightly improve performance.
Since responsive sizing is very rarely used for minWidth, width, and height related props, let's just add them for maxWidth.
Flex applies responsive width with inline styles, such as "max-width: var(--responsive-width-xl)" for maxWidth="xl" prop. We should create global classes in the appropriate SCSS file in the "styles" folder for max-width, since they are commonly used in Once UI. Then, change the logic in both the Grid and Flex for applying the classes instead of inline styles.
This would improve code structure and consistency of the DOM and slightly improve performance.
Since responsive sizing is very rarely used for minWidth, width, and height related props, let's just add them for maxWidth.