[code-snippet]: Text can be obscured by the copy button

[andy-blum]

Description

The copy button in the code snippet can overlay the text in the component making the text difficult to read and the copy button not immediately identifiable. While in some cases the code can scroll horizontally, edge cases exist where that's not possible.

Component(s) impacted

bx/cds-code-snippet

Browser

Firefox

Carbon for IBM.com version

v1 & v2

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

AEM

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://web-components-v1.carbondesignsystem.com/iframe.html?id=components-code-snippet--multi-line&viewMode=story

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[jkaeser]

This behavior is reflective of styles inherited from the upstream carbon-components package's _code-snippet.scss. As such, technically this is a bug in that package.

I can patch in a workaround in carbon-web-components, though we'll need a Carbon designer's sign-off given this is a visual design issue. Off the top of my head, I can think of two possible solutions (pink border added for illustrative purposes):

1. Float the copy button atop the content

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/03d8d8e2-b28f-40bc-8591-86910004e923

2. Add spacing to the right of content as a "track" for the copy button to sit in

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/7d4bb3b4-7a59-4366-9a77-c6f37f577923

@oliviaflory @RichKummer what do you think? Other ideas welcome, of course!

[jkaeser]

@oliviaflory @RichKummer Though this is a fairly innocuous bug, I have a high priority internal ticket to fix it. I opened up https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/11878 to give you something to look at, going with the first option I mentioned above. Let me know if you have the chance to take a look. Thanks!

[oliviaflory]

@jkaeser looking at the Carbon documentation I believe option 2 the "track" is the intention based off the design specs

[jkaeser]

Thanks, @oliviaflory! I updated the PR with that value.