From a4e010a96f1d8a52b3ac645e03fe472b9c3cbbb1 Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Mon, 11 Sep 2023 16:55:25 -0400
Subject: [PATCH] Fix share button position (#5470)

* fix share button position

* add changeset

* top padding

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/tricky-rabbits-glow.md |  6 ++++++
 js/chatbot/static/ChatBot.svelte  | 11 ++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/tricky-rabbits-glow.md

diff --git a/.changeset/tricky-rabbits-glow.md b/.changeset/tricky-rabbits-glow.md
new file mode 100644
index 0000000000..8758fa1a58
--- /dev/null
+++ b/.changeset/tricky-rabbits-glow.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Fix share button position
diff --git a/js/chatbot/static/ChatBot.svelte b/js/chatbot/static/ChatBot.svelte
index 7a18e5fcfd..e24f303a76 100644
--- a/js/chatbot/static/ChatBot.svelte
+++ b/js/chatbot/static/ChatBot.svelte
@@ -96,7 +96,7 @@
 </script>
 
 {#if show_share_button && value !== null && value.length > 0}
-	<div class="icon-button">
+	<div class="share-button">
 		<ShareButton
 			on:error
 			on:share
@@ -157,7 +157,7 @@
 								{/if}
 
 								{#if show_copy_button && message && typeof message === "string"}
-									<div class="icon-button">
+									<div class="copy-button">
 										<Copy value={message} />
 									</div>
 								{/if}
@@ -347,10 +347,15 @@
 	.message-buttons-fit {
 		margin-right: 0px;
 	}
-	.icon-button {
+	.copy-button {
 		margin-top: -10px;
 		margin-bottom: -10px;
 	}
+	.share-button {
+		position: absolute;
+		top: 4px;
+		right: 6px;
+	}
 	.like {
 		display: flex;
 		height: var(--size-8);