fix: refactor CopyButton and Auth components for improved readability and layout

Author: musale

src/app/views/common/copy-button/CopyButtonV9.tsx

@@ -1,11 +1,11 @@
-import { useState, useRef } from 'react';
 import { Button, Tooltip, makeStyles } from '@fluentui/react-components';
-import { translateMessage } from '../../../utils/translate-messages';
 import { CheckmarkRegular, CopyRegular } from '@fluentui/react-icons';
+import { useRef, useState } from 'react';
+import { translateMessage } from '../../../utils/translate-messages';
 
 interface ICopyButtonProps {
   style?: React.CSSProperties;
-  handleOnClick: Function;
+  handleOnClick: (props: ICopyButtonProps) => void;
   className?: string;
   isIconButton: boolean;
 }
@@ -23,7 +23,9 @@ export default function CopyButton(props: ICopyButtonProps) {
   const copyRef = useRef<HTMLButtonElement>(null);
   const styles = useStyles();
 
-  const copyLabel: string = !copied ? translateMessage('Copy') : translateMessage('Copied');
+  const copyLabel: string = !copied
+    ? translateMessage('Copy')
+    : translateMessage('Copied');
 
   const handleCopyClick = async () => {
     props.handleOnClick(props);
@@ -40,9 +42,9 @@ export default function CopyButton(props: ICopyButtonProps) {
   return (
     <>
       {props.isIconButton ? (
-        <Tooltip content={copyLabel} relationship='label'>
+        <Tooltip withArrow content={copyLabel} relationship='label'>
           <Button
-            appearance="subtle"
+            appearance='subtle'
             icon={copied ? <CheckmarkRegular /> : <CopyRegular />}
             aria-label={copyLabel}
             onClick={handleCopyClick}
@@ -52,14 +54,10 @@ export default function CopyButton(props: ICopyButtonProps) {
           />
         </Tooltip>
       ) : (
-        <Button
-          appearance="primary"
-          onClick={handleCopyClick}
-          ref={copyRef}
-        >
+        <Button appearance='primary' onClick={handleCopyClick} ref={copyRef}>
           {copyLabel}
         </Button>
       )}
     </>
   );
-}
+}

src/app/views/query-runner/request/auth/AuthV9.tsx

@@ -35,6 +35,7 @@ const useStyles = makeStyles({
   accessToken: {
     wordWrap: 'break-word',
     width: 'calc(100vw - var(--sidebar-size) - 4rem)',
+    padding: tokens.spacingHorizontalXS,
     height: '100%',
     border: 'none',
     resize: 'none'
@@ -59,7 +60,7 @@ export function Auth() {
   );
   const authToken = useAppSelector((state) => state.auth.authToken);
   const { user } = profile;
-  const requestHeight = convertVhToPx(height, 60);
+  const requestHeight = convertVhToPx(height, 5);
   const [accessToken, setAccessToken] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -105,6 +106,7 @@ export function Auth() {
             </Text>
             <CopyButton isIconButton={true} handleOnClick={handleCopy} />
             <Tooltip
+              withArrow
               content={translateMessage(showMessage())}
               relationship='label'
             >