PLP indicators disrupt container outlines in Firefox

[tomgreenfield]

Subject of the issue/enhancement/features

Container outline bounds are increased in height in Firefox due to the use of inline-block and whitespace between sibling elements.

Your environment

• Framework 5.1
• Firefox 72.0.1
• Windows 10

Steps to reproduce

1. Go to https://adaptlearning.github.io/v5demo/#/id/co-10
2. Run the following in the console:

$(".c-60").css({ outline: "1px solid black", backgroundColor: "grey" });

Expected behaviour

Top of container outline should be equal to its actual top.

Actual behaviour

Container outline is pushed several pixels higher.

Screenshots (if you can)

[akshay-bhavsar]

@tomgreenfield ,

There are two ways to solve this issue.
one could be Use of border property instead of using outline,
else we can remove "line-height" property of "component__title" class, but that causes little disruption in height of component title text.

what do you think?

[tomgreenfield]

Hi @akshay-bhavsar, the proper way to fix this is to simply omit the whitespace in the component template:

adapt_framework/src/core/templates/partials/component.hbs

Line 13 in 5b6460a

{{/unless}}

becomes:

      {{~/unless~}}

[akshay-bhavsar]

works well!!

I will Raise PR for the same.

[akshay-bhavsar]

PR: #2666

[moloko]

fixed via 5e39624

[moloko]

actually - does this not also need applying to article & block titles as well?