Allow app bar to flex width based on content

[adamint]

Description

Nav bar items were being cut off due to a default app bar item width. Since there's a wide range of text lengths for these strings based on language, I un-set the width to allow the app bar width to flex to fit content.

Before
english:

spanish:

After
english (slightly narrower):

spanish (wider):

There is one extreme (Russian), I'm not sure what to do with this. Maybe setting a max width? @JamesNK

Fixes #6935

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No
• Does the change require an update in our Aspire docs?
  • Yes
    • Is this introducing a breaking change?
      • Yes
        • Link to aspire-docs issue (please use this breaking-change template):
      • No
        • Link to aspire-docs issue (please use this doc-idea template):
  • No

[JamesNK]

I don't like this. I can't think of other UIs that have this design where the app bar changes size. I looked at what teams does when it is set to spanish and the app bar size is the same but the text is displayed up to the edges.

Instead to fix this we can remove the left/right padding on the items in the app bar. That allows all content to be displayed:

That won't work for every language - I see your Russian example won't fit - but I think we have to draw a line somewhere. This approach gives more room, but keeps a fixed size.

Maybe we should ask translation folks whether there are shorter words that can be used for Russian?

[JamesNK]

See comment