Fix tab navigation for InputWithCopy (#18009)

* Fix tab navigation for `InputWithCopy`

* Fix focus positioning

Author: filiptronicek

components/dashboard/src/components/InputWithCopy.tsx

@@ -27,13 +27,11 @@ export function InputWithCopy(props: { value: string; tip?: string; className?:
                 type="text"
                 value={props.value}
             />
-            <div className="cursor-pointer" 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 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>
     );
 }

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;
     }