Add mobile TOC bottom-sheet behavior for heading-focused navigation/editing

[Copilot]

On small screens, the TOC is now treated as an on-demand navigation panel instead of a persistent sidebar. It opens when a heading is selected, closes after TOC navigation, and closes immediately when heading editing begins.

• Mobile interaction model (JS)

  • Added small-screen detection (max-width: 768px) and heading-line detection in static/js/toc.js.
  • Added handleSmallScreenEvent(args) to:
    • show TOC when selection lands on a heading
    • hide TOC when heading text is being edited
  • Wired aceEditEvent to call this handler on editor events (static/js/aceEditEvent.js).

• TOC item navigation behavior (JS)

  • Updated TOC link click handler so small screens auto-close the TOC after jump/scroll navigation.

• Small-screen presentation (CSS)

  • Added a mobile media rule in static/css/toc.css to render TOC as a fixed bottom panel (bottom sheet style), with constrained height and top border.

• Regression coverage (frontend Playwright)

  • Added small-screen tests in static/tests/frontend-new/specs/toc.spec.js for:
    • opening on heading click + closing after TOC item click
    • closing as soon as heading editing starts

handleSmallScreenEvent: (args) => {
  if (!tableOfContents.isSmallScreen()) return;
  if (!$('#options-toc').is(':checked')) return;
  if (!args?.rep?.selStart) return;

  const isHeadingLine = tableOfContents.isHeadingLine(args.rep.selStart[0]);
  if (!isHeadingLine) return;

  const isEdit = args.callstack && args.callstack.docTextChanged === true;
  if (isEdit) return $('#toc').hide();
  $('#toc').show();
}