Support smaller font sizes on mobile

[cwilliams7]

Is your feature request related to a problem? Please describe.

The design team for Merch has a design for a mobile flight card that uses size 1.125rem font for the departure and arrival times:

The auro-flight component uses 1.75rem for these fonts and it cannot be adjusted directly.

Describe the solution you'd like

I'd like the component either updated to allow for an input to control the mobile font size, with the default value being the same as today for backward compatibility or have the component updated to use 1.125rem for departure & arrival times on mobile screen sizes, there was some discussion on the Auro public channel that the behavior I am seeing might be a bug and the font size is supposed to be 1.125rem on mobile.

Describe alternatives you've considered

I considered using javascript to reach into the shadow dom and modify the styles directly but this would be a brittle solution and doesn't address the underlying issue.

[blackfalcon]

Hey @cwilliams7 I am looking over the code for this element and we do not have any media query support. I am re-classing this as a FEATURE vs a BUG as this is not something that is broken, it's a capability that does not exist.

@leeejune who is a designer we can work with to understand the missing capability?

[leeejune]

@blackfalcon Not sure who the designer is. @cwilliams7 who can I reach out to?

[cwilliams7]

@blackfalcon, thanks for clarifying! @blackfalcon & @leeejune the designer would be Chloe L'Ecuyer.

[leeejune]

Erika has also brought this issue up. Would like to see this work refined.

[erikalanghauser]

Flight Search is planning to direct mobile user to the responsive microsite soon, and we are seeing the same wrapping issue with the time. The auro-flight blueprint does indicate smaller text sizes at the mobile breakpoint.

[leeejune]

This is the link to original redlines: https://www.figma.com/file/4e5FcfFlEhnSW9GveMlKnj/Flight-Line?type=design&node-id=160-7273&mode=design&t=fO8htQTrwZXcPRZs-11

[braven112]

We need to update the smallest breakpoint to use var(--auro-text-heading-300-size-breakpoint-sm)

[leeejune]

Blueprint completed here