Fixes various bugs with copy code button (mmistakes#1096)

This PR fixes three bugs:

# first bug

When revising my last PR mmistakes#1086 I realised a slight bug in the code-copy PR mmistakes#945 , my change to the css ignored a case. This PR is a hotfix and

Before PR mmistakes#945:
![image](https://user-images.githubusercontent.com/26844016/209864912-2fe8e5a9-f21e-40c7-aa0d-65050196f4ee.png)

![image](https://user-images.githubusercontent.com/26844016/209864950-c315cef1-36ee-4356-91b2-db159cf3806f.png)

After PR mmistakes#945:
![image](https://user-images.githubusercontent.com/26844016/209864524-70a8b095-056a-464b-9ff7-fd31397492ba.png)

![image](https://user-images.githubusercontent.com/26844016/209864558-9fd7a5d3-a965-4aa4-af62-a56846e331b3.png)

Fix:
![image](https://user-images.githubusercontent.com/26844016/209865514-a9921096-b852-4402-8272-b76908851ad6.png)

![image](https://user-images.githubusercontent.com/26844016/209865550-d7842507-74fc-4f21-b407-9b8917df1fd8.png)

# second bug

> @simonebortolin @mattxwang I'm trying to write some regression tests for this feature.
> 
> If I use GitHub's copy button to copy the following plain text, it preserves all the spaces:
> 
> ```
>  1 leading space
>   2 leading spaces and 2 trailing spaces  
> 3   internal spaces
> 4 trailing spaces    
> ```
> 
> Using the new copy button with the same text in this PR branch of JTD gives this:
> 
> ```
> 1 leading space
>    2 leading spaces and 2 trailing spaces  
>  3   internal spaces
>  4 trailing spaces
> ```
> 
> It appears that the leading space from line 1 has been removed, and inserted on all the other lines. Moreover, the 4 trailing spaces have been removed.
> 
> BTW, mmistakes#924 didn't give a precise requirements spec, but mentioned the Microsoft docs UI; @mattxwang mentioned also the GitHub UI. It would be helpful to add a functional spec of what the JTD copy button is supposed to do, as a basis for regression tests.
> 
> I'm not aiming at a rigorous test for the UI. Personally (using Safari at the default mag) I find the clipboard icon too small: it just looks like a box, and I can hardly see that there is a clip at the top. But I don't have a suggestion for a better icon.

# third bug

When I re-read the code after the second bug, I noticed a bug that it does not always select the text field to be copied correctly  (in case there are also line numbers) is copied:

```
1
2
3
4

	
# Ruby code with syntax highlighting and fixed line numbers using Liquid
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end
```
instead of 
```
# Ruby code with syntax highlighting and fixed line numbers using Liquid
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end
```

Co-authored-by: Matt Wang <matt@matthewwang.me>

_sass/code.scss

@@ -3,8 +3,8 @@
 
 // {% raw %}
 
-// This instruction applies to all queues not within 'pre', avoiding 'code' generated by the highlight.
-:not(pre) {
+// This instruction applies to all queues not within 'pre' or 'figure', avoiding 'code' generated by the highlight.
+:not(pre, figure) {
   & > code {
     padding: 0.2em 0.15em;
     font-weight: 400;
@@ -52,13 +52,13 @@ a:visited code {
 // ```[LANG]...```
 
 // the code may appear with 3 different types:
-// container \ case:  default case,          code with line number,          code with html rendering
-// top level:         div.highlighter-rouge, div.listingblock > div.content, figure.highlight
-// second level:      div.highlight,         .table-wrapper,                 pre
-// third level:       pre.highlight,         td.code,                        absent
-// last level:        code,                  pre,                            code (optionality)
-// highlighter level: span,                  span,                           span
-// the spacing are only in the second level for case 1, 3 and in the thirt level for case 2
+// container \ case:  default case,          code with line number,   code with html rendering
+// top level:         div.highlighter-rouge, figure.highlight,        figure.highlight
+// second level:      div.highlight,         div.table-wrapper,       pre.highlight
+// third level:       pre.highlight,         td.code,                 absent
+// last level:        code,                  pre,                     code (optionality)
+// highlighter level: span,                  span,                    span
+// the spacing are only in the second level for case 1, 3 and in the third level for case 2
 
 // select top level container
 div.highlighter-rouge,
@@ -150,7 +150,7 @@ figure.highlight {
 
 // setting the spacing and scrollbar on the thirt level for the second case
 .highlight .table-wrapper {
-  padding: 0;
+  padding: $sp-3 0;
   margin: 0;
   border: 0;
   box-shadow: none;

assets/js/just-the-docs.js

@@ -501,7 +501,7 @@ jtd.onReady(function(){
 
     copyButton.addEventListener('click', function () {
       if(timeout === null) {
-        var code = codeBlock.querySelector('code').innerText.trim();
+        var code = codeBlock.querySelector('pre:not(.lineno)').innerText;
         window.navigator.clipboard.writeText(code);
 
         copyButton.innerHTML = svgCopied;