Make the showcase theme selector sticky (#514)

* Make the showcase theme selector sticky

Adding `fixed` to the theme selector make it stick to the bottom of the
browser window instead of being stuck all the way at the bottom of the
scroll.

But if we _just_ add the `fixed` class, then the theme selector will
overlap the content at the very bottom of the page and we have no way to
get to it.

We can fix that by using a little bit of JS to calculate the height of
the theme selector and then set that amount of padding on the bottom of
the `main` container.

Doing that makes it so that there is a scrollbar if the theme selector
will overlap any content at the bottom of the `main` container.

And makes it so that you can scroll all the way down and see all of the
content.

* make it work with turbo

bullet_train-themes-light/app/views/showcase/engine/_head.html.erb

@@ -33,14 +33,19 @@
   BulletTrain.theme = new ___theme()
   BulletTrain.theme.start()
 
-  document.addEventListener("DOMContentLoaded", () => {
+  function placeThemeSelector() {
     const node = document.getElementById("bullet_train_theme_selects").content.cloneNode(true)
     document.querySelector("main").appendChild(node)
-  })
+    const selectorNode = document.getElementById("bt-theme-selector")
+    document.querySelector("main").style.paddingBottom = selectorNode.offsetHeight + "px"
+  }
+
+  document.addEventListener("DOMContentLoaded", placeThemeSelector);
+  document.addEventListener("turbo:load", placeThemeSelector);
 </script>
 
 <template id="bullet_train_theme_selects">
-  <section class="border-t w-full p-4 flex justify-end left-0 bottom-0">
+  <section class="border-t w-full p-4 flex justify-end left-0 bottom-0 fixed bg-white dark:sc-bg-neutral-900" id="bt-theme-selector">
     <h3 class="pt-2">Bullet Train Light theme options</h3>
 
     <div>