BETTER

assets/css/app.css

@@ -66,3 +66,19 @@
 }
 .footnotes-title { font-size: 1rem; }
 .marker { font-weight: 700; }
+
+/* The navbar is sticky, so an element scrolled to the top of the viewport
+   lands underneath it. These two are everything an anchor in this app points
+   at -- chapter headings and verse numbers -- so the offset lives on them
+   rather than on a scroll container. Roughly the navbar's height. */
+.chapter,
+.v { scroll-margin-top: 4.5rem; }
+
+/* The navbar's reference picker. form-select is width:100% by default, which
+   in a flex row means both selects try to take the whole navbar; and the
+   default right padding leaves the caret sitting on top of a three-digit
+   chapter number. */
+.reference .form-select {
+  width: auto;
+  padding-right: 2rem;
+}