From eacd1d2287fc6fe0e155e8b6b96fe9b4d71e96d8 Mon Sep 17 00:00:00 2001
From: filiptronicek <filip@gitpod.io>
Date: Wed, 21 Jun 2023 20:14:42 +0000
Subject: [PATCH 1/2] Fix tab navigation for `InputWithCopy`

---
 components/dashboard/src/components/InputWithCopy.tsx | 4 ++--
 components/dashboard/src/index.css                    | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/src/components/InputWithCopy.tsx b/components/dashboard/src/components/InputWithCopy.tsx
index b3c29ead4a657a..a29ba800f7e6a8 100644
--- a/components/dashboard/src/components/InputWithCopy.tsx
+++ b/components/dashboard/src/components/InputWithCopy.tsx
@@ -27,13 +27,13 @@ export function InputWithCopy(props: { value: string; tip?: string; className?:
                 type="text"
                 value={props.value}
             />
-            <div className="cursor-pointer" onClick={() => handleCopyToClipboard(props.value)}>
+            <button className="reset" onClick={() => handleCopyToClipboard(props.value)}>
                 <div className="absolute top-1/3 right-3">
                     <Tooltip content={copied ? "Copied" : tip}>
                         <img src={copy} alt="copy icon" title={tip} />
                     </Tooltip>
                 </div>
-            </div>
+            </button>
         </div>
     );
 }
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index db48bcdd27e2dd..d2783dd8fa2d09 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -55,6 +55,11 @@
     button {
         @apply cursor-pointer px-4 py-2 my-auto bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600 text-gray-100 dark:text-green-100 text-sm font-medium rounded-md focus:outline-none focus:ring transition ease-in-out;
     }
+    button.reset {
+        @apply bg-transparent hover:bg-transparent font-normal rounded-none;
+        padding: unset;
+        text-align: start;
+    }
     button.secondary {
         @apply bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-100 hover:text-gray-600;
     }

From 4dda376375de63bc092fd6ed3afd67e2f08aceea Mon Sep 17 00:00:00 2001
From: filiptronicek <filip@gitpod.io>
Date: Wed, 21 Jun 2023 20:39:33 +0000
Subject: [PATCH 2/2] Fix focus positioning

---
 components/dashboard/src/components/InputWithCopy.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/src/components/InputWithCopy.tsx b/components/dashboard/src/components/InputWithCopy.tsx
index a29ba800f7e6a8..080d574078e8d7 100644
--- a/components/dashboard/src/components/InputWithCopy.tsx
+++ b/components/dashboard/src/components/InputWithCopy.tsx
@@ -27,12 +27,10 @@ export function InputWithCopy(props: { value: string; tip?: string; className?:
                 type="text"
                 value={props.value}
             />
-            <button className="reset" onClick={() => handleCopyToClipboard(props.value)}>
-                <div className="absolute top-1/3 right-3">
-                    <Tooltip content={copied ? "Copied" : tip}>
-                        <img src={copy} alt="copy icon" title={tip} />
-                    </Tooltip>
-                </div>
+            <button className="reset absolute top-1/3 right-3" onClick={() => handleCopyToClipboard(props.value)}>
+                <Tooltip content={copied ? "Copied" : tip}>
+                    <img src={copy} alt="copy icon" title={tip} />
+                </Tooltip>
             </button>
         </div>
     );