From 47bdc9c42640d1f13fac4be7159cf2b99b84c42f Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Wed, 6 Mar 2024 12:47:57 +0530
Subject: [PATCH] styling changes have been made o remove the overlaping of
 focus outlines (#1721)

---
 .../Controls/ThroughputInput/ThroughputInput.less      | 10 ++++++++--
 src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx    |  2 ++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
index 00c328077..ae7e873fa 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
@@ -14,7 +14,13 @@
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
 }
-.capacitycalculator-link:focus{
+
+.capacitycalculator-link:focus {
   text-decoration: underline;
   outline-offset: 2px;
-}
\ No newline at end of file
+}
+
+.copyQuery:focus::after,
+.deleteQuery:focus::after {
+  outline: none !important;
+}
diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
index 557aee3d6..892100e6d 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -618,6 +618,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
 
           <Separator vertical style={{ color: "#EDEBE9" }} />
           <CommandBarButton
+            className="copyQuery"
             onClick={copyGeneratedCode}
             iconProps={{ iconName: "Copy" }}
             style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
@@ -625,6 +626,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             Copy query
           </CommandBarButton>
           <CommandBarButton
+            className="deleteQuery"
             onClick={() => {
               setShowDeletePopup(true);
             }}