LF-4426 update gap

[Duncan-Brain]

Description

Increases the gap between days of week buttons to 24px.

A couple pics snapped on chrome dev setting of Iphone 14 Pro max

Jira link: LF-4426

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[kathyavini]

I guess the gap is one of those things your eyes adjust to, because at first I thought it looked crazy weird in Hindi/Punjabi, but I already am liking it more!

However, with the wider gap, Hindi and Punjabi look pretty dang random when they break onto two lines 🤔

What do you think about center-justifying .container on the mobile (xs-breakpoint)? It would look like this:

It will be a noticeable difference in the European languages right at breakpoint:

Although on my actual phone I can barely tell:

and I think it would be worth it for the tidier look in the Indic languages.

As @antsgar didn't get to weigh in on the original PR and we are no longer in a rush to merge, I would be curious what she thinks too.

[Duncan-Brain]

Yeah I dno. My UI preferences are not so fine tuned! I think I prefer left aligned as discussed and just widening the gap from 8px to 24 px. @loicsans can probably take a look here too if you think its worth discussing for Indic.

[antsgar]

Looked at the original PR and this one, I think it looks good right now! A few thoughts:

• I think to prevent it from looking "random" as you mention Joyce when it wraps into two lines, the vertical gap should be slightly wider than the horizontal gap (we discussed a similar situation on the dev design meeting the other day). To achieve this we can use row-gap and column-gap attributes and set column-gap to be say 16px and row-gap to be 24px (for example).
• IMO it's okay to have the items be different widths in this case if it's too much effort to make them all the same width.
• Center aligning looks a bit weird to me in full screen in comparison to the rest of the screen which is left aligned.
• Not related to all this spacing discussion, but I think the font color on these items should be darker. The light grey makes it seem they are disabled when they aren't.

But of course this is all UX so Loïc would be the best person to chime in!

[Duncan-Brain]

• I like the row-gap column-gap to make it look better! -- only question at that point is the touch/mobile thumb width of ~48?px thing if that is okay or not
• It seemed like there were a bunch of tradeoffs yes
• 👍
• Good point!

[kathyavini]

@antsgar center aligning was never for full screen! Only for mobile view (at xs-breakpoint).

It might all be moot as AI has decided now (as I was translating the new calendar files) that Punjabi + Hindi have one-letter abbreviations for the days after all! I will check with native speaker proofreader 😂