Fix the width model for a scalable nav button

Review the AI's codeEasy10 min

Your task

An AI wrote a navigation button with width: 96px, font-size: 13px, white-space: nowrap and overflow: hidden. It fit the English mockup. German and Finnish labels were cut off, and so was the text of users who raise their browser's font size. The fix sizes the button to its label and scales every length with the user's font setting. Your team wants a model of the widths it produces.

An assistant wrote intrinsic_button_widths(labels, base_font_px, user_scale_percent). It is in the editor. It has a bug. Find it and fix it.

Input and output:

  • labels: the button labels, in ASCII.
  • base_font_px: the font size at the browser's default setting, in px.
  • user_scale_percent: the user's font scale. 100 is the default and 200 is double.
  • Return each button's width in px, in label order.

Rules the tests check. Write the scale as s. Compute with whole numbers, and round each part up to a whole px on its own:

  • Every length scales with the user's setting: the text, the padding and the minimum width.
  • Text width: the label's character count times base_font_px times 600 times s, divided by 100000, rounded up. That is 0.6 of the font size per character, the average width of a letter.
  • Padding: 12 px on each side, so 24 times s, divided by 100, rounded up.
  • Minimum width: 96 times s, divided by 100, rounded up.
  • The button is text width plus padding, but never narrower than the minimum width.

Examples

intrinsic_button_widths(labels: list[str], base_font_px: int, user_scale_percent: int) -> list[int]
Example 1
Inputintrinsic_button_widths(["Settings", "Save", "Cancel"], 13, 100)
Output[96, 96, 96]
Example 2
Inputintrinsic_button_widths(["Einstellungen"], 13, 100)
Output[126]
Example 3
Inputintrinsic_button_widths(["Settings"], 13, 200)
Output[192]