Fix: Resolve copy button visibility issue in Textbox component (#9859)

* Fix: Resolve copy button visibility issue in Textbox component * restore tabs * add changeset * changes * format --------- Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: aliabid94 <[email protected]> Co-authored-by: Abubakar Abid <[email protected]>
gradio-app · Oct 31, 2024 · c1cb5be · c1cb5be
1 parent d9a0f17
commit c1cb5be
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/.changeset/tidy-bikes-allow.md b/.changeset/tidy-bikes-allow.md
@@ -0,0 +1,6 @@
+---
+"@gradio/textbox": patch
+"gradio": patch
+---
+
+fix:Fix: Resolve copy button visibility issue in Textbox component
diff --git a/js/textbox/shared/Textbox.svelte b/js/textbox/shared/Textbox.svelte
@@ -198,6 +198,23 @@
 
 <!-- svelte-ignore a11y-autofocus -->
 <label class:container class:show_textbox_border>
+	{#if show_label && show_copy_button}
+		{#if copied}
+			<button
+				in:fade={{ duration: 300 }}
+				class="copy-button"
+				aria-label="Copied"
+				aria-roledescription="Text copied"><Check /></button
+			>
+		{:else}
+			<button
+				on:click={handle_copy}
+				class="copy-button"
+				aria-label="Copy"
+				aria-roledescription="Copy text"><Copy /></button
+			>
+		{/if}
+	{/if}
 	<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 
 	<div class="input-container">
@@ -256,23 +273,6 @@
 				/>
 			{/if}
 		{:else}
-			{#if show_label && show_copy_button}
-				{#if copied}
-					<button
-						in:fade={{ duration: 300 }}
-						class="copy-button"
-						aria-label="Copied"
-						aria-roledescription="Text copied"><Check /></button
-					>
-				{:else}
-					<button
-						on:click={handle_copy}
-						class="copy-button"
-						aria-label="Copy"
-						aria-roledescription="Copy text"><Copy /></button
-					>
-				{/if}
-			{/if}
 			<textarea
 				data-testid="textbox"
 				use:text_area_resize={value}
@@ -392,7 +392,7 @@
 		right: var(--block-label-margin);
 		align-items: center;
 		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--color-border-primary);
+		border: 1px solid var(--border-color-primary);
 		border-top: none;
 		border-right: none;
 		border-radius: var(--block-label-right-radius);