change tab html element from anchor to span

apps/vyper/src/app/components/CompilerButton.tsx

@@ -118,10 +118,10 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
   }
 
   return (
-    <Button data-id="compile" onClick={compileContract} variant="primary" title={contract} className="d-flex flex-column">
+    <button data-id="compile" onClick={compileContract} title={contract} className="d-flex flex-column btn btn-primary btn-block">
       <span>Compile</span>
       <span className="overflow-hidden text-truncate text-nowrap">{contract}</span>
-    </Button>
+    </button>
   )
 }
 

apps/vyper/src/app/components/VyperResult.tsx

@@ -48,8 +48,8 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
   }
 
   return (
-    <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)}>
-      <Tab eventKey="abi" title="ABI">
+    <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
+      <Tab eventKey="abi" title="ABI" as={'span'}>
         <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['abi'])}>
           <Button variant="info" className="copy" data-id="copy-abi">
             Copy ABI