Display of Long Equations is Cut Off

[Hasenpfote]

When writing slightly longer equations, the display gets cut off.

For now, this issue can be resolved with the following workaround:

Insert the following code into .custom-md in src/styles/markdown.css:

    .katex-display {
        @apply block max-w-full overflow-x-auto whitespace-nowrap p-2;
    }

However, it is disappointing to see an awkward scrollbar appear.

Since this theme seems to use a great scrollbar, it would be wonderful to incorporate it and unify the design.
I hope you can consider this improvement.

Thank you!

[xiyuvi]

Can you share this lengthy equation for effect testing

[Hasenpfote]

@xiyuvi

The actual code is as follows:

- $\frac{d}{dh} \operatorname{Squad}(p_{i-1}, p_{i}, s_{i-1}, s_{i}, 1) =  \frac{d}{dh} \operatorname{Squad}(p_{i}, p_{i+1}, s_{i}, s_{i+1}, 0)$

  $$
  \begin{aligned}
  \frac{d}{dh} \operatorname{Squad}(p_{i-1}, p_{i}, s_{i-1}, s_{i}, 1)
  &=\operatorname{SLERP}(p_{i-1}, p_{i}; 1) \cdot \log{(\overline{p_{i-1}} \cdot p_{i})}
  - \operatorname{SLERP}(p_{i-1}, p_{i}; 1) \cdot \left(\frac{d}{dh} g_{i-1}(h)^{2h(1-h)}\right)(1)\\
  &=p_{i} \cdot \log{(\overline{p_{i-1}} \cdot p_{i})}
  - 2 p_{i} \cdot \theta_{g_{i-1}(1)} \mathbb{i}\\
  &=p_{i} \cdot \left(\log{(\overline{p_{i-1}} \cdot p_{i})}
  - 2 \log(g_{i-1}(1))\right)\\
  &=p_{i} \cdot \left(\log{(\overline{p_{i-1}} \cdot p_{i})}
  - 2 \log(\overline{p_{i}} \cdot s_{i})\right)\\
  \\
  \frac{d}{dh} \operatorname{Squad}(p_{i}, p_{i+1}, s_{i}, s_{i+1}, 0)
  &=\operatorname{SLERP}(p_{i}, p_{i+1}; 0) \cdot \log{(\overline{p_{i}} \cdot p_{i+1})}
  - \operatorname{SLERP}(p_{i}, p_{i+1}; 0) \cdot \left(\frac{d}{dh} g_{i}(h)^{2h(1-h)}\right)(0)\\
  &=p_{i} \cdot \log{(\overline{p_{i}} \cdot p_{i+1})}
  - 2 p_{i} \cdot \theta_{g_{i}(0)} \mathbb{i}\\
  &=p_{i} \cdot \left(\log{(\overline{p_{i}} \cdot p_{i+1})}
  - 2 \log{(g_{i}(0))}\right)\\
  &=p_{i} \cdot \left(\log{(\overline{p_{i}} \cdot p_{i+1})}
  - 2 \log{(\overline{p_{i}} \cdot s_{i})}\right)
  \end{aligned}
  $$

If a single line is too long, you don't have to adhere strictly to the above code. For example:

$$
x=11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 \cdots
$$

$$ x=11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111\cdots $$

I appreciate your help.

[xiyuvi]

I have resolved this issue, but I cannot see the failure message of Vercel. Before the author merges, you can manually replace the following content to achieve the desired effect

src\layouts\Layout.astro ,function initCustomScrollbar

function initCustomScrollbar() {
	const bodyElement = document.querySelector('body');
	if (!bodyElement) return;
	OverlayScrollbars(
		// docs say that a initialization to the body element would affect native functionality like window.scrollTo
		// but just leave it here for now
		{
			target: bodyElement,
			cancel: {
				nativeScrollbarsOverlaid: true,    // don't initialize the overlay scrollbar if there is a native one
			}
		}, {
		scrollbars: {
			theme: 'scrollbar-base scrollbar-auto py-1',
			autoHide: 'move',
			autoHideDelay: 500,
			autoHideSuspend: false,
		},
	});
	const preElements = document.querySelectorAll('pre');
	preElements.forEach((ele) => {
		OverlayScrollbars(ele, {
			scrollbars: {
				theme: 'scrollbar-base scrollbar-dark px-2',
				autoHide: 'leave',
				autoHideDelay: 500,
				autoHideSuspend: false
			}
		});
	});
	const katexElements = document.querySelectorAll('.katex-display') as NodeListOf<HTMLElement>;
	katexElements.forEach((ele) => {
		OverlayScrollbars(ele, {
			scrollbars: {
				theme: 'scrollbar-base scrollbar-auto py-1',
			}
		});
	});
}

[xiyuvi]