I have tested this item ✅ successfully on c3e460f

Confirmed that the links now have 24px height.

I have tested this item ✅ successfully on c3e460f

Confirmed that the links now have 24px height.

I have tested this item ✅ successfully on c3e460f

I have tested this item ✅ successfully on c3e460f

I have tested this item ✅ successfully on c3e460f

Verification

• Same result at 1668px and 375px viewport width; link widths unchanged, no additional horizontal overflow.
• All three links receive keyboard focus with a visible focus outline.
• The rule exists once in the compiled template.css / template.min.css; nothing else on the login page is affected.

"Before" was measured on the same page with the new rule's two declarations removed. RTL not tested.

Suggestion (not blocking)

The fixed line-height: 24px no longer scales with the text. With the root font size at 200% (links 28px) the line-height stays 24px, where it was 42px before, so the two links that wrap get tight lines (two-line link: 52.5px instead of 75px).

.com_login .sidebar-wrapper #sidebar .loginsupport a {
  display: inline-block;
  line-height: max(24px, 1.5em);
}

Tested: 24.5px target height at default size, 42px line-height at 200%.

Why it scaled before: the links had no own line-height and inherited the unitless body { line-height: var(--body-line-height) } with --body-line-height: 1.5 (computed 21px at 14px, 42px at 28px, ratio 1.50 on every ancestor up to body).

Screenshots (yellow outline added to show the link box; 200% = root font size 200%, not page zoom):

1-before-100

2-pr-100

3-before-200

4-pr-200

5-suggested-200

2 successful test -> RTC

2 successful test -> RTC

We should avoid using "px" I guess? We better go for the bootstrap classes: https://getbootstrap.com/docs/5.3/utilities/text/#line-height this also does not increase the css file.

I am not happy with this solution. My Browsers, Firefox and Chrome, increase the icons together with the font
and following the WCAG rules the icons are "accessible".

From css point of view our rule was not mixing realtive values with fix values.
Regarding the KI screens I would reject the PR. Only very small fingers and good eyes can use this icon next to the huge text.

I am not happy with this solution. My Browsers, Firefox and Chrome, increase the icons together with the font
and following the WCAG rules the icons are now "accessible".

From css point of view our rule was not mixing realtive values with fix values.
Regarding the KI screens I would reject the PR. Only very small fingers and good eyes can use this icon next to the huge text.

even mdn recommends NOT to use units for the line height

line-height: 1.75;

I agree with everything that has been brought up here. All I wanted to do with this PR was get the issue resolved that flagged the proximity of the links as a WCAG SC 2.5.8 failure. It's my belief that WCAG is the floor, not the ceiling, so if we all can agree on a better way forward with the spacing, I'm happy to support it and help implement it. Again, I just wanted to correct the failure. However, there's no limit to the UX improvements that go beyond the baseline of WCAG.

its not enough to put a band aid on something to tick a checkbox

@brianteeman is correct.

Using unit for line-height is poor practice.
Take the following into consideration:

.element {
  font-size: 16px;
  line-height: 24px;
}

This will give decent spacing between the text.

A user with visual impairments has their browser base font-size set to `24px` (or more).

The `line-height` now matches the `font-size`, which isn't acceptable.

The reason we **don't** use units for `line-height` is so that the height dynamically changes when the font-size does.

Better to use `line-height: 1.6`, which is 1.6x the `font-size`.

@brianteeman is correct.

Using unit for line-height is poor practice.
Take the following into consideration:

.element {
  font-size: 16px;
  line-height: 24px;
}

This will give decent spacing between the text.

A user with visual impairments has their browser base font-size set to 24px (or more).

The line-height now matches the font-size, which isn't acceptable.

The reason we don't use units for line-height is so that the height dynamically changes when the font-size does.

Better to use line-height: 1.6, which is 1.6x the font-size.

@brianteeman is correct.

Using units for line-height is poor practice.
Take the following into consideration:

.element {
  font-size: 16px;
  line-height: 24px;
}

This will technically give decent spacing between the text, however if a user with visual impairments has their browser base font-size set to 24px (or more), the line-height will then match the font-size, which isn't acceptable.

The reason we don't use units for line-height is so that the height dynamically changes when the font-size does.

Better to use line-height: 1.6, which is 1.6x the font-size.

and just for completeness thats exactly what the bootstrap class that @bembelimen does

and just for completeness thats exactly what the bootstrap class that @bembelimen mentioned does although personally I would use scss and not a class thats just a matter of taste

Remove RTC

Remove RTC

Thanks for the feedback, @C-Lodder. I chose 1.72 as the line height given the default state computed font size is 14px and 1.6 wouldn't quite get us to 24px.