Hide KaTeX overflow scrollbars

Author: Edwin Chan

CENTRAL.md

@@ -35,6 +35,7 @@ Stack: Next.js, NextAuth (Google + dev bypass), Prisma, KaTeX for math, Lucide i
 
 - **Consistent page exits and sidebar state** — page headers and completion states use the shared `PageBackLink` control with one explicit `Back to …` label, one canonical 44 px control size, and a logical parent destination. The Classes landing page now includes its missing `Back to Dashboard` control, and nested class pages link directly back to `/classes`. Detail pages no longer present competing arrow buttons for both Dashboard and their parent collection. Sidebar activation now selects one most-specific segment-aware route, so the signed-in user's `/users/<username>` page highlights only **My Profile**, while another user's profile highlights **Users**. Active links expose `aria-current="page"`; no schema or deploy change is required (sources: `app/page-back-link.tsx`, `lib/sidebar-navigation.ts`, `app/site-sidebar-nav.tsx`).
 - **Uniform Students and Leaderboard rows** — the dense Students and Leaderboard tables opt out of the global alternating cream row background. Ordinary rows now share one neutral surface; top-three Leaderboard emphasis and row hover feedback remain intact (sources: `app/admin/students/page.tsx`, `app/globals.css`).
+- **Invisible KaTeX overflow chrome** — inline and display statement math keep local horizontal scrolling for long expressions, but their browser scrollbars are hidden so short formulas no longer render grey pill-shaped “sliders” underneath (source: `app/globals.css`).
 - **Mobile problem statement containment** — narrow problem cards now use a zero-minimum single-column grid, and their statement/answer regions cannot inflate the page beyond the viewport. Long inline and display KaTeX expressions scroll locally with touch-friendly horizontal overflow instead of being cut off by the mobile shell; phone layouts also use tighter workspace/card padding and wrap question-card headers. No schema or deploy change is required (source: `app/globals.css`).
 - **Custom problem tags** — create and edit forms accept arbitrary comma-separated set and question tags in addition to the suggested chips. Custom set tags become named, filterable categories in the problem-set catalog instead of collapsing into `Others`; question tags remain independent and become Practice topics after more than 10 published, unsolved questions use them. Tag aliases and casing still normalize through `lib/problem-tags.ts`; no schema or deploy change is required.
 - **Evidence-aware performance analytics** — the old points-weighted best average and duplicated leaderboard score are replaced by one derived `PerformanceProfile` in `lib/analytics.ts`. Mastery Index combines a three-set-prior proficiency score (65%), square-root visible-set breadth (20%), and a smoothed lower-quartile consistency floor (15%); best-set average, mastery rate, counts, and evidence remain visible. Dashboard, profiles, settings, student admin/detail, global analytics leaders, leaderboard, and student CSV use the same helper. `npm run simulate:performance` validates a deterministic 100-student × 100-set cohort: `0.980` ability/index rank correlation, 89 distinct values, monotonic ability deciles, and broad 80% performance outranking one perfect result. No schema/deploy change is required (sources: `lib/analytics.ts`, `scripts/simulate-performance-model.ts`, `tests/analytics.test.ts`, `docs/performance-model.md`).

app/globals.css

@@ -12279,3 +12279,17 @@ html:is(.light, .dark) .notfound-digit-zero {
 .leaderboard-table tbody tr:hover {
   background: color-mix(in srgb, var(--paper-blue) 55%, transparent);
 }
+
+/* Preserve horizontal math scrolling without painting a scrollbar under every formula. */
+.statement-math-inline,
+.statement-math-block {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.statement-math-inline::-webkit-scrollbar,
+.statement-math-block::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}

docs/latex-support.md

@@ -34,6 +34,10 @@ Legacy display environments `eqnarray`, `flalign`, `multline`, and `displaymath`
 
 Full-document wrappers are tolerated for imports: DBSMO extracts the content inside `\begin{document}...\end{document}` and ignores `\documentclass`, `\usepackage`, and outer centering environments. Packages named in `\usepackage` are not downloaded or executed.
 
+## Responsive Rendering
+
+Inline and display math retain local horizontal scrolling when an expression is wider than its problem card. The browser scrollbar is visually hidden so short KaTeX expressions do not acquire grey scrollbar pills; touch, trackpad, and wheel scrolling remain available for long expressions.
+
 ## MathLive Compatibility
 
 MathLive is an interactive math editor with its own command dictionary; it is not a full TeX package runtime or a drop-in replacement for KaTeX. Its documented table examples use the `array` environment, which KaTeX already supports. DBSMO adds conservative aliases for MathLive's predefined notation macros when they have a direct KaTeX equivalent.