From 85309a65640199c0f46c3a3d26b05c216bb8b59e Mon Sep 17 00:00:00 2001
From: Ryosuke Igarashi <igarashi.ryosuke@classmethod.jp>
Date: Tue, 4 Jun 2024 11:52:34 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=8D=E8=A6=81=E3=81=AA=E3=82=B9?=
 =?UTF-8?q?=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=83=90=E3=83=BC=E3=81=8C?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=81=AA=E3=81=84=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=83=8D=E3=82=AC=E3=83=86=E3=82=A3=E3=83=96?=
 =?UTF-8?q?=E3=83=9E=E3=83=BC=E3=82=B8=E3=83=B3=E3=82=92=E7=9B=B8=E6=AE=BA?=
 =?UTF-8?q?=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zenn-cli/articles/304-example-embed-katex.md | 12 ++++++++++++
 packages/zenn-content-css/src/_embed.scss        | 16 +++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/zenn-cli/articles/304-example-embed-katex.md b/packages/zenn-cli/articles/304-example-embed-katex.md
index 11121a5d..19d53289 100644
--- a/packages/zenn-cli/articles/304-example-embed-katex.md
+++ b/packages/zenn-cli/articles/304-example-embed-katex.md
@@ -265,6 +265,18 @@ issue: https://github.com/zenn-dev/zenn-community/issues/337
 
 素数全体を2つのグループに分け、$p_1, …, p_k$ を「小さい」素数、$p_{k+1}$ 以降を「大きい」素数と呼ぶことにする。$N$ 以下の自然数で、「大きい」素数で割れる数と、「小さい」素数でしか割れない数に分け、前者の個数を $N_1$、後者の個数を $N_2$ とおく。当然 $N = N_1 + N_2$ である。
 
+## 数式番号を含む数式
+
+issue: https://github.com/zenn-dev/zenn-community/issues/608
+
+数式番号を含む数式に、スクロールバーが発生しないこと
+
+$$
+\begin{align}
+J_w \ddot{\theta}_w &= T - \frac{f}{r} \\
+\end{align}
+$$
+
 ## 折りたたみ
 
 :::details 詳細
diff --git a/packages/zenn-content-css/src/_embed.scss b/packages/zenn-content-css/src/_embed.scss
index 0e13ca96..91b199bd 100644
--- a/packages/zenn-content-css/src/_embed.scss
+++ b/packages/zenn-content-css/src/_embed.scss
@@ -56,12 +56,23 @@ span.embed-block {
   margin: 1.5rem auto;
 }
 
+embed-katex {
+  // issue: https://github.com/zenn-dev/zenn-community/issues/327
+  // 横に長い要素がはみ出さないようにはスクロールバーを有効化する
+  overflow-x: auto;
+  // issue: https://github.com/zenn-dev/zenn-community/issues/608
+  // .katex .vlist-t2 に指定されているネガティブマージン（margin-right: -2px）により一部のブラウザでスクロールバーが表示されるため
+  // ネガティブマージンを相殺するパディングを親要素に設定する
+  padding-right: 2px;
+}
+
 // prevent katex overflow
 // for inline $foo$
 embed-katex:not([display-mode='1']) {
-  display: inline-flex; // Don't use inline-block here.
-  overflow-x: auto;
+  display: inline-flex;
   max-width: 100%;
+  // issue: https://github.com/zenn-dev/zenn-editor/pull/216
+  // インライン要素ではいかなる場合でもスクロールバーを表示しない
   -ms-overflow-style: none;
   scrollbar-width: none;
   &::-webkit-scrollbar {
@@ -75,5 +86,4 @@ embed-katex:not([display-mode='1']) {
 embed-katex[display-mode='1'] {
   display: block;
   width: 100%;
-  overflow-x: auto;
 }