Adds horizontal scrolling to content that overflows in gr.Markdown (#…

…5394) * markdown' * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Aug 31, 2023 · 4d94ea0 · 4d94ea0
1 parent 79d8f9d
commit 4d94ea0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/.changeset/happy-hairs-tell.md b/.changeset/happy-hairs-tell.md
@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": patch
+"gradio": patch
+---
+
+fix:Adds horizontal scrolling to content that overflows in gr.Markdown
diff --git a/js/markdown/Markdown.stories.svelte b/js/markdown/Markdown.stories.svelte
@@ -41,6 +41,18 @@ in two separate lines.`
 	}}
 />
 
+<Story
+	name="Markdown with Wide Content (Horizontal Scrolling)"
+	args={{
+		value: `| ids                 | ids                 | ids                 |
+| ---------------------------------- | ---------------------------------- | ---------------------------------- |
+| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   |
+| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   |
+| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz   |
+`
+	}}
+/>
+
 <Story name="Right aligned Markdown" args={{ rtl: true }} />
 
 <Story
@@ -50,3 +62,4 @@ in two separate lines.`
 		latex_delimiters: [{ left: "$", right: "$", display: false }]
 	}}
 />
+
diff --git a/js/markdown/static/Markdown.svelte b/js/markdown/static/Markdown.svelte
@@ -56,6 +56,7 @@
 
 	div {
 		max-width: 100%;
+		overflow-x: auto;
 	}
 
 	.min {