From ca09e9eb722e39449c3d5ebf0683f72a2be4bf54 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 30 Aug 2022 15:07:42 +0200
Subject: [PATCH] width of item is fixed`

---
 apps/vyper/src/app/app.css                    |  2 +-
 apps/vyper/src/app/app.tsx                    |  4 ++--
 apps/vyper/src/app/components/VyperResult.tsx | 19 +++++++++----------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css
index d2f1a92b7d..db9ee76b63 100644
--- a/apps/vyper/src/app/app.css
+++ b/apps/vyper/src/app/app.css
@@ -49,7 +49,7 @@ html, body, #root, main {
 }
 
 #compile-btn {
-  width: 90%;
+  width: 100%;
 }
 
 #compile-btn * {
diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index a02d89f00a..ad91f29c3f 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/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}
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 9f9ee1c7e5..44ccba7b7f 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/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}>
-      <i className="fas fa-exclamation-circle text-danger"></i>
-      <pre data-id="error-message" className="px-2 w-100 alert alert-danger" style={{
-        fontSize: "0.5rem",
-        overflowX: "hidden",
-        textOverflow: "ellipsis"
-      }}>{output.message}</pre>
-    </div>)
+      <div id="result" className="error" title={output.message}>
+        <i className="fas fa-exclamation-circle text-danger"></i>
+        <pre data-id="error-message" className="px-2 w-100 alert alert-danger" style={{
+          fontSize: "0.5rem",
+          overflowX: "hidden",
+          textOverflow: "ellipsis"
+        }}>{output.message}</pre>
+      </div>
+    )
   }
 
   return (