[EuiCode] Fix bug where padding is not being contained in the inline box

[elizabetdev]

Summary

The padding for the EuiCode component was not being taken into consideration because it uses a <code /> element that is inline by default.

This PR adds a line-height so that the padding is contained in the inline box.

Checklist

• Check against all themes for compatibility in both light and dark modes
• [ ] Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• [ ] Added documentation
• [ ] Checked Code Sandbox works for any docs examples
• [ ] Added or updated jest and cypress tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5629/

[cchaos]

Hmm, so I totally noticed what you noticed as well, but I don't think inline-block is the answer. It was specifically removed in this commit: 1f6b548 part of PR #5379.

The main reason being that with inline, when the <code> is so long it wraps, it still continues in the natural flow of the text like so:

However, with inline-block it tries to keep itself together as much as possible, which ends up in awkward breaks like so:

Using inline also keeps the line-height of the paragraph intact while inline-block increases this because of the padding.

I'm wondering if there's a better solution?

[elizabetdev]

Thanks, @cchaos totally forgot those use cases. Let me try a different solution. 🙌🏽

[elizabetdev]

@cchaos here's the new approach. I decided to use a unitless line-height which preserves the font-size / line-height ratio when the font size changes.

But I have to say that I found this 1.72 by trying different numbers until it looked good. Probably there is a formula based on the current font-size and padding that gives the perfect number. But I couldn't find it. 😬

[cchaos]

I'm still worried that the increase in line-height, especially when nested in a EuiText will offset that paragraph's line-height. I created a sandbox to test out some possible options and to compare the differences: https://codesandbox.io/s/stoic-kalam-vtprj?file=/demo.js

Here's a screenshot with an overlay grid to see the impact:

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5629/

[elizabetdev]

Closing this PR. Not happy with my solutions.