fix label position

apps/remix-ide/src/app/tabs/locales/en/udapp.json

@@ -5,7 +5,7 @@
   "udapp.value": "Value",
   "udapp.contract": "Contract",
   "udapp.compiledBy": "Compiled by {compilerName}",
-  "udapp.warningEvmVersion": "Please make sure that the current network is following the evm version: {evmVersion}. Otherwise any deployment will fail.",
+  "udapp.warningEvmVersion": "Please make sure that the current network is compatible with this evm version: {evmVersion}. Otherwise any deployment will fail.",
   "udapp.infoSyncCompiledContractTooltip": "Click here to import contracts compiled from an external framework.This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.",
   "udapp.remixIpfsUdappTooltip": "Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)",
   "udapp.signAMessage": "Sign a message",

libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx

@@ -275,16 +275,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
             <FormattedMessage id='udapp.contract' />
           </label>
           <div className="d-flex">{compilerName && compilerName !== '' && <label style={{ maxHeight: '0.6rem', lineHeight: '1rem' }} data-id="udappCompiledBy">(<FormattedMessage id='udapp.compiledBy' values={{ compilerName: <span className="text-capitalize"> {compilerName}</span> }} />)</label>}</div>
-          { evmVersion && loadedContractData && <CustomTooltip
-            placement={'right'}
-            tooltipClasses="text-wrap text-left"
-            tooltipId="info-evm-version-warn"
-            tooltipText={<span className="text-left">
-              <FormattedMessage id='udapp.warningEvmVersion' values={{ evmVersion }}/>
-            </span>}
-          >
-            <span className='ml-2'>(evm: {evmVersion})</span>
-          </CustomTooltip> }
         </div>
         {props.remixdActivated ?
           (<CustomTooltip
@@ -323,6 +313,16 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
         </CustomTooltip>
         <span className="py-1" style={{ display: abiLabel.display }}>{abiLabel.content}</span>
       </div>
+      { evmVersion && loadedContractData && <CustomTooltip
+            placement={'right'}
+            tooltipClasses="text-wrap text-left"
+            tooltipId="info-evm-version-warn"
+            tooltipText={<span className="text-left">
+              <FormattedMessage id='udapp.warningEvmVersion' values={{ evmVersion }}/>
+            </span>}
+          >
+            <span className='badge badge-secondary'>evm version: {evmVersion}</span>
+          </CustomTooltip> }
       <div>
         <div className="udapp_deployDropdown">
           {((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? intl.formatMessage({ id: 'udapp.noCompiledContracts' })

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -79,7 +79,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: 2px;
 }
 .udapp_subcontainer i {
   width: 16px;