Focus\viewport position issues on patterns pages

[ad9242]

Summary of the bug

On the patterns pages, there are a couple of issues with the content in view

🪜 How to reproduce

issue 1:

1. go to top nav layout
2. click on the "Show code" button
3. the focused element (the "Hide code" button) is now off screen so, if using a mouse, you have to scroll all the way down to hide it again

issue 2:

1. go to top nav layout
2. click on the "Show code" button
3. scroll all the way down to so the "Hide code" button is visible
4. click the button
5. the page jumps to the bottom of the page

🧐 Expected behaviour

Issue 1: ideally the focused element would not be off-screen. unsure if this is a accessibility issue, but it is certainly annoying

Issue 2: The page should not scroll to the bottom and the viewport should show the code preview corresponding to the button clicked

Suggested changes: Some very quick mock ups to move all buttons to the top of the preview. I'm sure someone more skilled could improve: