From 70b226a0820b534f3f992915c2a7b4feb17418aa Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Mon, 20 Dec 2021 08:52:41 +0900
Subject: [PATCH] katex CSS fix - prevent katex formula overflowing on smaller
 displays

---
 source/src/styles/globalStyle.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/source/src/styles/globalStyle.tsx b/source/src/styles/globalStyle.tsx
index e4e9d99..75d23bf 100644
--- a/source/src/styles/globalStyle.tsx
+++ b/source/src/styles/globalStyle.tsx
@@ -193,6 +193,14 @@ const markCSS = css`
 	}
 `
 
+const katexCSS = css`
+	// prevent overflowing on small displays
+	.katex-html {
+		overflow-x: scroll;
+		padding: 0.5rem;
+	}
+`
+
 // Theme that will be used throughout the website
 // wrapping it using css because prettier extension does not work well with styled-components
 // https://github.com/styled-components/vscode-styled-components/issues/175
@@ -204,6 +212,7 @@ const globalStyle = css`
 	${blockquoteCSS}
 	${headerCSS}
 	${markCSS}
+	${katexCSS}
 
 	body {
 		overflow-x: hidden;