search

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
8.56k stars 1.98k forks source link

The KateX formulations will overflow the page and result in page-responsive breakdown. #766

Closed PrinOrange closed 10 months ago

PrinOrange commented 10 months ago

Describe the bug image

image

Like this situation, when the Katex Block's width beyond the page's container in low-width pixels screen ( such as Google Pixel 7 Mobile Phone ), the reminent parts will be crowded out.

To Reproduce

There is a present example :

  1. Goto the page https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator
  2. Use Browser DevTools and make the width less than 400px
  3. Observe the KateX Block and the page effect-variation.

Expected behavior To solve this problem, my advise is add the horizontal scrollbar for KateX block to absorb the overflow part.

System Info (if dev / build issue):

Browser Info (if display / formatting issue):