Fix excess scroll bug in dataframe (#10802)

* fix excess scroll

* add changeset

* fix test

* fix test

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

Author: hannahblair

.changeset/dirty-peaches-leave.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Fix excess scroll bug in dataframe

js/dataframe/shared/EditableCell.svelte

@@ -104,9 +104,8 @@
 
 {#if edit}
 	<input
-		disabled={is_static}
-		aria-disabled={is_static}
-		class:static={is_static}
+		readonly={is_static}
+		aria-readonly={is_static}
 		role="textbox"
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
@@ -131,7 +130,6 @@
 	class:edit
 	class:expanded={is_expanded}
 	class:multiline={header}
-	class:static={!editable}
 	on:focus|preventDefault
 	style={styling}
 	data-editable={editable}
@@ -188,6 +186,7 @@
 		border: none;
 		background: transparent;
 		cursor: text;
+		width: calc(100% - var(--size-2));
 	}
 
 	span {
@@ -241,7 +240,7 @@
 		object-fit: contain;
 	}
 
-	input:disabled {
+	input:read-only {
 		cursor: not-allowed;
 	}
 </style>

js/spa/test/dataframe_events.spec.ts

@@ -279,7 +279,7 @@ test("Static columns cannot be edited", async ({ page }) => {
 	await page.waitForTimeout(100);
 
 	const is_disabled =
-		(await static_column_cell.locator("input").getAttribute("disabled")) !==
+		(await static_column_cell.locator("input").getAttribute("readonly")) !==
 		null;
 	expect(is_disabled).toBe(true);
 
@@ -289,7 +289,7 @@ test("Static columns cannot be edited", async ({ page }) => {
 
 	const is_not_disabled = await editable_cell
 		.locator("input")
-		.getAttribute("aria-disabled");
+		.getAttribute("aria-readonly");
 	expect(is_not_disabled).toEqual("false");
 });