fix: prevent phone-width horizontal overflow (closes #26)

styles.css

@@ -274,3 +274,40 @@ panel. Pin table text and headers to dark ink with transparent backgrounds. */
   color: #222;
   border-color: #dee2e6;
 }
+
+/* Phone-width overflow (#26).
+ * A callout body is a flex item, and a flex item's default `min-width: auto`
+ * lets wide content (display math, code, a long URL) stretch the whole
+ * callout past the viewport, so the page scrolls sideways. `min-width: 0`
+ * keeps the callout at the column width; the rules below then contain what
+ * is still too wide. */
+.callout-body-container {
+  min-width: 0;
+}
+
+/* Scroll a too-wide equation inside its own box instead of widening the page.
+ * MathJax sets an inline `min-width` on a numbered equation, sized to fit the
+ * equation and its number side by side; `!important` is the only way to
+ * override an inline style from a stylesheet. */
+mjx-container[display="true"] {
+  max-width: 100%;
+  min-width: 0 !important;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* Let long unbroken link text (bare URLs) wrap. */
+main a {
+  overflow-wrap: break-word;
+}
+
+/* On a phone, scroll a too-wide table inside its own box. `display: block`
+ * would shrink a full-width table to its content on wider screens, so it
+ * applies only below Bootstrap's `sm` breakpoint. */
+@media (max-width: 575.98px) {
+  main table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+}