padding-right on :first-line using CSS - html

Question

I was reading through MDN's page for history.pushState() on my phone and noticed what I thought was a textual error: there should be a comma after the [ in the final argument of the syntax.
I went to edit the page, and discovered the comma does exist; it's hidden by the 📋 Copy to Clipboard button. (Oddly, despite white-space: pre, Chrome iOS treats it like pre-wrap, while Chrome desktop does not.)
The ideal solution for this (barring a fix to Chrome iOS) would be a CSS style that sets the padding-right of the first line.
#media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
.code-example pre:first-line {
padding-right: 41px;
}
}
This, however, seems to be ignored. Am I doing something wrong or--as I suspect--is this simply impossible?
Another, easier if inelegant, solution would be to set the Copy to Clipboard button's style to
.code-example .copy-icon {
display: block;
margin-right: -16px;
margin-top: -16px;
float: right;
}
and move the <button> inside the <pre>. But, much like <table> en lieu of display: grid, float is out of vogue.
Plus, without a conditional check for mobile browsers, this change would alter the behavior of desktop/non-buggy mobile browsers:
Despite white-space: pre; overflow: auto, the browser is rendering line-wrap.
Assuming :first-line { padding-right } is unsupported, is there another way to achieve the same effect with either CSS or a JavaScript hack?
Note: I did search for a duplicate question, but every result was about indenting the first line of a paragraph, the solution to which is :first-line { text-indent }.
Update
I suppose given any solution that detects the browser must, by definition, detect the browser, we could just detect buggy browsers using navigator.userAgent, and then manipulate the DOM and apply float: right to the button. Kinda nasty, though.

Answer 1

Inspecting the MDN page you've referred to, I noticed there is a <code> element inside the <pre>. Hence, you could do the following:
#media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
.code-example pre code {
display: block;
max-width: 90%;
}
}
That way, the Copy to Clipboard button wouldn't overlap the code.