Minor improvement to floating bottom bar behavior

Author: jstrieb

TODO.md

@@ -146,9 +146,11 @@
   - history.pushstate with non-cloneable values fails
   - Copy/paste does not always work
   - Line numbers have small lag on scroll
-  - Special keys bar has bad placement on Chrome on Android
   - Special keys bar buttons cause active element blur when double tapped on
     iOS
   - Side-scrolling special keys bar on iOS inserts on pointer up
+  - Special keys bar and formula bar is scrollable on mobile, even with
+    `touch-action: none` - needs touch handler with preventDefault to stop
+    vertical scrolling
   - Accidentally typing "RC" while typing another formula can cause everything
     to hang

src/App.svelte

@@ -49,6 +49,8 @@
     align-items: center;
     gap: 0.5ch;
     overflow-x: auto;
+    background-color: var(--bg-color);
+    z-index: 19;
   }
 
   .bottombar {
@@ -239,7 +241,7 @@
   $effect(() => {
     // iOS scrolls the formula bar to the middle on focus, this counteracts that
     // (if it happens to run after the keyboard is up - inconsistent)
-    if (showInputButtons) {
+    if (showInputButtons && visualBottom) {
       window.scrollTo({
         top: 0,
         behavior: "instant",