fix(ui): add content left padding

[OnkarRuikar]

• fix Left sidebar scrollbar overlaps headings anchor icon #593

Description

Need to provide more space for # indicators on the left side. Current padding for the content sections is zero.

Motivation

Additional details

After fix gap:

[caugner]

I don't think the # indicator justifies taking away 1rem from the content area, so we should probably find a different solution.

I can think of two approaches:

1. Reduce the size of the indicator, avoiding the overflow.
2. Move the indicator behind the heading again (i.e. reverting mdn/yari#8532). To avoid mdn/yari#6647, we might be able to reserve space for the indicator behind the heading, even when hidden.

[caugner]

/cc @mdn/content-team

[OnkarRuikar]

How about we reduce the right shift from -8em to -6rem. It looks a bit congested but it works:

hash.mp4

For this check the latest commit in your local.

---

Move the indicator behind the heading again (i.e. reverting mdn/yari#8532). To avoid mdn/yari#6647, we might be able to reserve space for the indicator behind the heading, even when hidden.

It looks weird when def list items in value sections show hash mark on left and headings show it on right :|

[github-actions]

bf48e08 was deployed to: https://fred-pr671.review.mdn.allizom.net/

[caugner]

Tested on https://fred-pr671.review.mdn.allizom.net/en-US/docs/Web/CSS#how_to and looks better than the status quo:

Before:

After:

@LeoMcA Should we close in favor of #1154, or merge this for the time being?

[LeoMcA]

#1154 would fix this for good, but it's up to @mdn/content-team if they want an interim fix