Table of Contents looks bad on mobile devices / small screens

[drusepth]

We're using the horizontal Stepper from Material-UI for our table of contents, which looks great on larger screens but isn't responsive.

For example,

The TableOfContents component has a renderRetro() method we could use to render a plaintext table of contents, but I'm not sure how to switch which method gets rendered based on screen size / device type at page load. We could probably also use CSS and media queries to style the stepper-style table of contents to look better on mobile devices.

I'm open to any good solution that 1) doesn't change the table of contents (much?) on large screens, and 2) makes it look better on small screens.