mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-12 12:40:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix scrollbars everywhere (#9276)

Browse Source 
* 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>
This commit is contained in:
aliabid94 2024-09-09 23:23:59 -07:00 committed by GitHub
parent 278af1995b
commit 8362a10a7e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/warm-impalas-turn.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/json": minor
"gradio": minor
---
feat:Fix scrollbars everywhere

32
js/json/Index.svelte
View File

@ -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>

7
js/json/shared/JSON.svelte
View File

@ -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 {