From 35905c5c8f7acbe669486ac8f57b6955328e4783 Mon Sep 17 00:00:00 2001
From: aliabid94 <aabid94@gmail.com>
Date: Mon, 20 May 2024 15:36:23 -0700
Subject: [PATCH] Cleanup markdown styling (#8311)

* changes

* add changeset

* changes

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
---
 .changeset/fuzzy-spies-notice.md       |  8 ++++++
 js/chatbot/shared/ChatBot.svelte       | 35 --------------------------
 js/markdown/shared/MarkdownCode.svelte | 26 -------------------
 js/theme/src/typography.css            | 19 +++++++++++---
 4 files changed, 23 insertions(+), 65 deletions(-)
 create mode 100644 .changeset/fuzzy-spies-notice.md

diff --git a/.changeset/fuzzy-spies-notice.md b/.changeset/fuzzy-spies-notice.md
new file mode 100644
index 0000000000..12748ddb89
--- /dev/null
+++ b/.changeset/fuzzy-spies-notice.md
@@ -0,0 +1,8 @@
+---
+"@gradio/chatbot": minor
+"@gradio/markdown": minor
+"@gradio/theme": minor
+"gradio": minor
+---
+
+feat:Cleanup markdown styling
diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
index 1c4e3754a8..589670ceb3 100644
--- a/js/chatbot/shared/ChatBot.svelte
+++ b/js/chatbot/shared/ChatBot.svelte
@@ -520,37 +520,6 @@
 		}
 	}
 
-	.message-wrap .message :global(a) {
-		color: var(--color-text-link);
-		text-decoration: underline;
-	}
-
-	.message-wrap .bot :global(table),
-	.message-wrap .bot :global(tr),
-	.message-wrap .bot :global(td),
-	.message-wrap .bot :global(th) {
-		border: 1px solid var(--border-color-primary);
-	}
-
-	.message-wrap .user :global(table),
-	.message-wrap .user :global(tr),
-	.message-wrap .user :global(td),
-	.message-wrap .user :global(th) {
-		border: 1px solid var(--border-color-accent);
-	}
-
-	/* Lists */
-	.message-wrap :global(ol),
-	.message-wrap :global(ul) {
-		padding-inline-start: 2em;
-	}
-
-	/* KaTeX */
-	.message-wrap :global(span.katex) {
-		font-size: var(--text-lg);
-		direction: ltr;
-	}
-
 	/* Copy button */
 	.message-wrap :global(div[class*="code_wrap"] > button) {
 		position: absolute;
@@ -585,8 +554,4 @@
 		height: 100%;
 		color: var(--body-text-color);
 	}
-
-	.message-wrap :global(pre) {
-		position: relative;
-	}
 </style>
diff --git a/js/markdown/shared/MarkdownCode.svelte b/js/markdown/shared/MarkdownCode.svelte
index fc5cbfcd16..1fe4d5c493 100644
--- a/js/markdown/shared/MarkdownCode.svelte
+++ b/js/markdown/shared/MarkdownCode.svelte
@@ -130,17 +130,6 @@
 		color: var(--body-text-color);
 	}
 
-	span :global(pre) {
-		position: relative;
-	}
-
-	span:not(.chatbot) :global(ul) {
-		list-style-position: inside;
-	}
-
-	span:not(.chatbot) :global(ol) {
-		list-style-position: inside;
-	}
 	span :global(p:not(:first-child)) {
 		margin-top: var(--spacing-xxl);
 	}
@@ -166,19 +155,4 @@
 	span.md :global(.md-header-anchor > svg) {
 		color: var(--body-text-color-subdued);
 	}
-
-	span :global(h1),
-	span :global(h2),
-	span :global(h3),
-	span :global(h4),
-	span :global(h5),
-	span :global(h6) {
-		display: flex;
-		align-items: center;
-		white-space-collapse: break-spaces;
-	}
-
-	.prose :global(:last-child) {
-		margin-bottom: 0;
-	}
 </style>
diff --git a/js/theme/src/typography.css b/js/theme/src/typography.css
index ca71ff7405..95cfb2ec73 100644
--- a/js/theme/src/typography.css
+++ b/js/theme/src/typography.css
@@ -31,7 +31,6 @@
 }
 
 .prose h1 {
-	margin-top: 0;
 	font-size: var(--text-xxl);
 }
 
@@ -62,7 +61,7 @@
 
 .prose ul > p,
 .prose li > p {
-	display: inline-block;
+	display: inline;
 }
 .prose ol,
 .prose ul {
@@ -75,6 +74,7 @@
 .prose ol ul {
 	margin: 0.5em 0 0.5em 0em;
 	font-size: 90%;
+	padding-inline-start: 2em;
 }
 .prose li {
 	margin-bottom: 0.5em;
@@ -88,7 +88,7 @@
 .prose th,
 .prose td {
 	border-bottom: 1px solid #e1e1e1;
-	padding: 12px 15px;
+	padding: var(--text-xs) var(--text-md);
 	text-align: left;
 }
 
@@ -116,6 +116,17 @@
 	margin-bottom: var(--spacing-md);
 }
 
+.prose table,
+.prose tr,
+.prose td,
+.prose th {
+	border: 1px solid var(--body-text-color);
+}
+.prose table {
+	border-collapse: collapse;
+	margin-bottom: var(--spacing-xxl);
+}
+
 /* links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose a {
@@ -150,6 +161,6 @@
 	padding-left: var(--size-2);
 }
 
-.prose:last-child {
+.prose :last-child {
 	margin-bottom: 0 !important;
 }