fix(ui): Update ClipboardInput positioning and change from disabled to readonly (#8593)

Author: alexcarpenter

.changeset/qcwt-pcxyt-vbpuw.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Improve ClipboardInput positioning and accessibility by using `readOnly` instead of `isDisabled`

packages/ui/src/elements/ClipboardInput.tsx

@@ -23,17 +23,22 @@ export const ClipboardInput = (props: ClipboardInputProps) => {
       <Input
         {...rest}
         value={value}
-        isDisabled
-        sx={theme => ({ paddingInlineEnd: theme.space.$8 })}
+        readOnly
+        sx={theme => ({ paddingInlineEnd: theme.space.$7x5, textOverflow: 'ellipsis' })}
       />
 
       <Button
         elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}
         variant='ghost'
         onClick={() => onCopy()}
-        sx={{
-          position: 'absolute',
-          insetInlineEnd: 0,
+        sx={t => {
+          return {
+            position: 'absolute',
+            padding: 0,
+            insetInlineEnd: t.space.$0x5,
+            insetBlock: t.space.$0x5,
+            aspectRatio: 1,
+          };
         }}
       >
         <Icon