From 8362a10a7e8a3c291fa0300a6f4a23a1ca997b8a Mon Sep 17 00:00:00 2001
From: aliabid94 <aabid94@gmail.com>
Date: Mon, 9 Sep 2024 23:23:59 -0700
Subject: [PATCH] Fix scrollbars everywhere (#9276)

* changes

* add changeset

* scroll fix

* remove .json css, adjust scroll height to account for label

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
---
 .changeset/warm-impalas-turn.md |  6 ++++++
 js/json/Index.svelte            | 32 +++++++++++++++-----------------
 js/json/shared/JSON.svelte      |  7 +++++--
 3 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/warm-impalas-turn.md

diff --git a/.changeset/warm-impalas-turn.md b/.changeset/warm-impalas-turn.md
new file mode 100644
index 0000000000000..1d8e7902ad6b1
--- /dev/null
+++ b/.changeset/warm-impalas-turn.md
@@ -0,0 +1,6 @@
+---
+"@gradio/json": minor
+"gradio": minor
+---
+
+feat:Fix scrollbars everywhere
diff --git a/js/json/Index.svelte b/js/json/Index.svelte
index 7a9b6c00d9061..adfecb9c825c1 100644
--- a/js/json/Index.svelte
+++ b/js/json/Index.svelte
@@ -29,7 +29,7 @@
 	export let open = false;
 	export let theme_mode: "system" | "light" | "dark";
 	export let show_indices: boolean;
-	export let height: string | number | undefined;
+	export let height: string | number | undefined = undefined;
 
 	$: {
 		if (value !== old_value) {
@@ -37,6 +37,8 @@
 			gradio.dispatch("change");
 		}
 	}
+
+	let label_height = 0;
 </script>
 
 <Block
@@ -51,15 +53,17 @@
 	allow_overflow={false}
 	{height}
 >
-	{#if label}
-		<BlockLabel
-			Icon={JSONIcon}
-			{show_label}
-			{label}
-			float={false}
-			disable={container === false}
-		/>
-	{/if}
+	<div bind:clientHeight={label_height}>
+		{#if label}
+			<BlockLabel
+				Icon={JSONIcon}
+				{show_label}
+				{label}
+				float={false}
+				disable={container === false}
+			/>
+		{/if}
+	</div>
 
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -68,11 +72,5 @@
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
-	<JSON {value} {open} {theme_mode} {show_indices} />
+	<JSON {value} {open} {theme_mode} {show_indices} {label_height} />
 </Block>
-
-<style>
-	:global(.block) {
-		overflow-y: scroll !important;
-	}
-</style>
diff --git a/js/json/shared/JSON.svelte b/js/json/shared/JSON.svelte
index 7a16cac62fccd..b50db93aa5ecd 100644
--- a/js/json/shared/JSON.svelte
+++ b/js/json/shared/JSON.svelte
@@ -9,6 +9,9 @@
 	export let open = false;
 	export let theme_mode: "system" | "light" | "dark" = "system";
 	export let show_indices = false;
+	export let label_height: number;
+
+	$: json_max_height = `calc(100% - ${label_height}px)`;
 
 	let copied = false;
 	let timer: NodeJS.Timeout;
@@ -56,7 +59,7 @@
 			<Copy />
 		{/if}
 	</button>
-	<div class="json-holder">
+	<div class="json-holder" style:max-height={json_max_height}>
 		<JSONNode
 			{value}
 			depth={0}
@@ -91,7 +94,7 @@
 
 	.json-holder {
 		padding: var(--size-2);
-		overflow-y: scroll;
+		overflow-y: auto;
 	}
 
 	.empty-wrapper {