Code-snippet vertical alignment error with "always" scrollbar

[matrober-uk]

Title line template: [Title]: Brief description

On Mac, the code-snippet vertical alignment is not correct for single line snippet when the scroll bars are set to "always".

Detailed description

Describe in detail the issue you're having.
We have a series of single line code snippets on the page we are building, but the snippet text appears flush against the top of the box, rather than centred nicely within the field as shown in the screenshots below.

The text is correctly aligned when viewed on a Mac screen natively" but there appears to be a case when there is an external mouse attached when causes the scroll bar to be rendered permanently, and the text gets pushed to the top of the page

This seems to be because the presence of the external mouse causes the scroll bars to going into "always show" mode. The issue can also be reproduced by setting that mode manually in the Mac settings as described below.

Is this issue related to a specific component?

code-snippet

What did you expect to happen? What happened instead? What would you like to see changed?

In all cases, a single line of text should be vertically aligned in the centre of the field, matching the alignment of the copy button on the right of the field.

What browser are you working in?

MacOS 10.14.6, occurs in all browsers tested;

• Firefox 60.8.0esr
• Safari 12.1.2
• Chrome 76.0.3809.100

What version of the Carbon Design System are you using?

Reproduceable in the version currently shown on the website;
https://www.carbondesignsystem.com/components/code-snippet/code

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM MQ on Cloud.
Not stop-ship, so no concerns about release date.

Steps to reproduce the issue

Two approaches;

1. Plug in an external mouse that causes scroll bars to be rendered all the time
2. Go to Settings > General, and select "Show scroll bars - Always"
3. Go to the Carbon Design page for the code-snippet; https://www.carbondesignsystem.com/components/code-snippet/code

[asudoh]

Hi 👋 thank you for reporting! Given this has the same root cause as #2060, let's merge this to there.