labsite: Improve scrolling on Next click

Improve the scrolling experience on Next button click: We now always scroll the
next button to the top of the page with the top edge a little clipped. Smooth
scrolling is also enabled, so it should hopefully be more obvious what's going
on when clicking on the next button. Unfortunately smooth scrolling doesn't
seem to work on my linux machine in Firefox or Chrome, but it seem ok on MacOS
and iOS.

frontend/lab/css/overrides.css

@@ -26,6 +26,12 @@ html {
   height: 100%;
   padding: 8px 16px var(--editor-padding-bottom) 16px;
   scroll-behavior: smooth;
+  position: relative;
+}
+.notes:after {
+  content: "";
+  display: block;
+  height: 80%;
 }
 
 @media (min-width: 768px) {

frontend/play/index.js

@@ -478,7 +478,7 @@ function handleNotesNextClick(e) {
     if (el.querySelector(".next-btn")) break
     el = el.nextElementSibling
   }
-  btn.nextElementSibling?.scrollIntoView({ behavior: "smooth" })
+  document.querySelector("#notes").scrollTo({ top: btn.offsetTop + 8, behavior: "smooth" })
 }
 
 function updateEditor(content, opts) {