[Bug] [UX] periodSelector should have fixed width while in month mode

[H-Lo]

What happened?

Hi! When I switch period selector into month mode, there is inconvenience present while trying to click next month because ih has width set to auto which means it changes its width depending on a month displayed which varies from "july" to "september". That makes continuos clicking impossible.

What should happen?

When switching to month mode, period selector could get another CSS class which could be e.g. ".FixedWidthForMonthlyDisplay" and which would set its width to fit the largest name of month. That could give us ability to continuously click back and forward without missing a little arrow icon on the right.

How can this be reproduced?

pen Matomo admin pages

• click period selector
• click "month" radio button placed on the right site of popup that pops up after clicking period selecto
• click "apply"
• click left arrow icon 8 times
• try to click right arrow icon 8 times and you'll see the icon is moving left and right depending on month displayed

Matomo version

Matomo version: 5.6.2 MySQL version:

PHP version

8.4.16

Server operating system

Ubuntu 24.04.2

What browsers are you seeing the problem on?

Chrome, Firefox

Computer operating system

Win 11

Relevant log output

Validations

• Read our Contributing Guidelines.
• Follow our Security Policy.
• Check that there isn't already an issue that reports the same bug to avoid creating duplicates.
• The provided steps to reproduce is a minimal reproducible of the Bug.