refactor(ui): change placement of option labels in challenge select

[DayKev]

What are the changes the user will see?

The option labels and left arrow are dynamically placed based on the actual length of the option text, rather than fixed based on the option with the longest text, and the padding between the right arrow and the border was set to a fixed distance for all languages (generally results in a reduction).

Why am I making these changes?

The current method was causing unnecessary text overlapping.

What are the changes from a developer perspective?

• The right arrow is now fixed relative to the container border instead of dynamic based on the longest option text.
• The left arrow is dynamic, placed a fixed spacing to the left of the option text.
• The option text is right-aligned within the left and right arrows.
• The padding between the right arrow and the container border is fixed.
• A console warning is added to notify if there is potential text overlap due to a challenge name + option text combination being too long.

Screenshots/Videos

Before

After

Checklist

• The PR content is correctly formatted:
  • I'm using beta as my base branch
  • The current branch is not named beta, main or the name of another long-lived feature branch
  • I have provided a clear explanation of the changes within the PR description
  • The PR title matches the Conventional Commits format (as described in CONTRIBUTING.md)
• The PR is self-contained and cannot be split into smaller PRs
• There is no overlap with another open PR
• The PR has been confirmed to work correctly:
  • I have tested the changes manually

[SirzBenjie]

It looks better before, but yeah...