width of item is fixed`

apps/vyper/src/app/app.css

@@ -49,7 +49,7 @@ html, body, #root, main {
 }
 
 #compile-btn {
-  width: 90%;
+  width: 100%;
 }
 
 #compile-btn * {

apps/vyper/src/app/app.tsx

@@ -83,7 +83,7 @@ const App: React.FC = () => {
         </a>
       </header>
       <section>
-        <div className="px-3 w-100">
+        <div className="px-4 w-100">
           <Button data-id="add-repository" className="w-100 text-dark w-100 bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
             Clone Vyper examples repository
           </Button>
@@ -107,7 +107,7 @@ const App: React.FC = () => {
           environment={state.environment}
         />
         <WarnRemote environment={state.environment} />
-        <div id="compile-btn">
+        <div className="px-4" id="compile-btn">
           <CompilerButton
             compilerUrl={compilerUrl()}
             contract={contract}

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

@@ -10,7 +10,6 @@ import Button from 'react-bootstrap/Button';
 import JSONTree from 'react-json-view'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 
-
 interface VyperResultProps {
   output?: VyperCompilationOutput;
 }
@@ -27,20 +26,20 @@ function VyperResult({ output }: VyperResultProps) {
 
     <div id="result">
       <p className="my-3">No contract compiled yet.</p>
-      
     </div>
   )
 
   if (isCompilationError(output)) {
     return (
-    <div id="result" className="error" title={output.message}>
+      <div id="result" className="error" title={output.message}>
-      <i className="fas fa-exclamation-circle text-danger"></i>
+        <i className="fas fa-exclamation-circle text-danger"></i>
-      <pre data-id="error-message" className="px-2 w-100 alert alert-danger" style={{
+        <pre data-id="error-message" className="px-2 w-100 alert alert-danger" style={{
-        fontSize: "0.5rem",
+          fontSize: "0.5rem",
-        overflowX: "hidden",
+          overflowX: "hidden",
-        textOverflow: "ellipsis"
+          textOverflow: "ellipsis"
-      }}>{output.message}</pre>
+        }}>{output.message}</pre>
-    </div>)
+      </div>
+    )
   }
 
   return (