And adding style to GenCode

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  position: relative;
+
+  .copy-to-clipboard {
+    position: absolute;
+    cursor: pointer;
+    top: 0px;
+    right: 0px;
+    z-index: 10;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js

@@ -2,6 +2,7 @@ import CodeEditor from 'components/CodeEditor/index';
 import get from 'lodash/get';
 import { HTTPSnippet } from 'httpsnippet';
 import { useTheme } from 'providers/Theme/index';
+import StyledWrapper from './StyledWrapper';
 import { buildHarRequest } from 'utils/codegenerator/har';
 import { useSelector } from 'react-redux';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -24,18 +25,22 @@ const CodeView = ({ language, item }) => {
 
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <StyledWrapper>
-        <CopyToClipboard text={snippet} onCopy={() => toast.success('Copied to clipboard!')}>
+        <CopyToClipboard
+          className="copy-to-clipboard"
+          text={snippet}
+          onCopy={() => toast.success('Copied to clipboard!')}
+        >
           <IconCopy size={25} strokeWidth={1.5} />
         </CopyToClipboard>
-      </div>
+        <CodeEditor
-      <CodeEditor
+          readOnly
-        readOnly
+          value={snippet}
-        value={snippet}
+          font={get(preferences, 'font.codeFont', 'default')}
-        font={get(preferences, 'font.codeFont', 'default')}
+          theme={storedTheme}
-        theme={storedTheme}
+          mode={lang}
-        mode={lang}
+        />
-      />
+      </StyledWrapper>
     </>
   );
 };