Fix scrollbars everywhere (#9276)

* changes * add changeset * scroll fix * remove .json css, adjust scroll height to account for label --------- Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Hannah <[email protected]>
gradio-app · Sep 10, 2024 · 8362a10 · 8362a10
1 parent 278af19
commit 8362a10
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/.changeset/warm-impalas-turn.md 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
@@ -29,14 +29,16 @@
 	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) {
 			old_value = value;
 			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
@@ -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 {