fix(left-sidebar): text alignment of current page

[mayank99]

Description

This PR adds a negative margin to the <em> element which houses the current link (<a aria-current="page">) inside left-sidebar. The value of this negative margin is calculated as the sum of padding and border width.

It seems like this codebase mixes logical properties with physical properties everywhere, which is confusing and probably not intentional. For this PR, I've converted the border-left declaration within the same ruleset into its logical equivalent (border-inline-start) and also grouped it together with the padding-inline and margin-inline-start declarations for better readability / local reasoniing.

Motivation

This change was necessary for optical left alignment of all items within the same list.

Before	After

Additional details

N/A

Related issues and pull requests

N/A

[LeoMcA]

This causes an issue when the highlighted item is at the top level, where the accent is cut off:

I'm touching the sidebar padding/margin in #1154 so it might be worth revisiting after that is merged.

Please also run prettier.

[mayank99]

I can move this to draft while waiting for #1154.

[github-actions]

59bfd7e was deployed to: https://fred-pr1221.review.mdn.allizom.net/