Try to prevent Carbon Ads from causing problems

[skirtles-code]

Description of Problem

The initial problem was the horizontal scrollbar, reported in #793. This would appear below 1300px or 1367px width, depending on the page.

I've also tried to fix edge cases that could occur when the ad overlapped content. In the picture below, the text should not be obscured by the ad:

In this picture, the text js should be behind the ad but it is on top instead:

Proposed Solution

I've removed the CSS from Layout.vue. That attempted to create a placeholder but it wasn't necessary. So long as the ad uses margins for positioning, rather than relative positioning, it will push text out of the way without needing the placeholder.

I've bumped up the z-index to 5 so that the ad appears in front of the language when it overlaps code examples. This is only applied conditionally so that it won't overlap the PWA popup.

I've given the image a fixed width of 125px. The Vue 2 docs seem to do the same thing. Without that the image has a width of 130px, which slightly overflows the box we've given it.

I've changed the media query threshold from 1300px to 1376px. That seems to be the correct value for switching modes. Layout.vue already had it set to 1376px, though that code is now removed.

I've made various small tweaks to the CSS to try to remove unnecessary code.

[NataliaTepluhina]

Thank you! I prefer multiple CSS tweaks over the overflow: hidden

[aliataf]

@NataliaTepluhina @skirtles-code
There is nothing wrong with giving overflow-x: hidden to the root tag because generally, no one wants to see horizontal scrolling on web pages so all the elements will inherit this property from the root tag, and when you want a specific element to have its own overflow-x property then it will overwrite what coming from his parents and the reason I am writing this is to let you know that I have seen horizontal scroll again when the element that says "new content" and has a refresh button appears but I didn't take a screenshot.

[skirtles-code]

@aliataf There's a lot more work required to make all of the pages properly responsive. Currently there are some pages that need the horizontal scrollbar to access their content on a narrow viewport. Having a scrollbar is preferable to content being inaccessible.

More generally, if a scrollbar is showing unnecessarily then we should aim to fix the underlying cause rather than the symptom. The scrollbar acts as a useful indicator of a problem that needs to be fixed. In the case of the ads it was only irrelevant whitespace that was overflowing but in the general case it could be something more important.

I tried to reproduce the problem you described with the PWA popup, 'New content is available.', showing in the bottom right corner. I tested across a number of pages at different widths but wasn't able to trigger a scrollbar. I also took a look at the code to see whether there was any obvious cause for such a problem but I couldn't find one. That message shows for any new content, including CSS changes, so it's possible you were still looking at a version of the page that didn't include my CSS changes. I'd be interested to know if you see it again.