fix: Adjusting the width of dropdown

[zoesteinkamp]

This will make it so the width of the dropdown will adjust to the longest variable name

Closes #18021

Describe your proposed changes here.
Ive done a simple math problem that determines the longest length in the values and makes that the width px

• CHANGELOG.md updated with a link to the PR (not the Issue)
• Well-formatted commit messages
• Rebased/mergeable
• Tests pass
• http/swagger.yml updated (if modified Go structs or API)
• Documentation updated or issue created (provide link to issue/pr)
• Signed CLA (if not already signed)

[drdelambre]

how did you choose the number eight?

[zoesteinkamp]

Im not going to lie, it looked the best in the UI. I tried a few numbers, and 8 looked ideal for the px

[drdelambre]

is the intent to find out what the max width of the longest variable could be?

[zoesteinkamp]

So the intent is find the longest variable, then take its length and determine how much width in px would be needed to display it

[drdelambre]

@alexpaxton do you have any fancy tricks for measuring text up your sleeve? i have a fear that we're tightly coupling a font choice to system behavior here

[alexpaxton]

If we style the dropdown items to be in the monospace font then all characters will be the same width, and more predictable

[drdelambre]

usually when there's measuring of text to be done, you send the text to a hidden span floating off screen and measure the span, and that decouples font size / face / letterspacing issues from the measurement, but i can't see a favorable ROI on using that technique unless it's done in clockface for all the things