remix-project-org · Aniket-Engg · Aug 13, 2025 · Aug 12, 2025 · Aug 12, 2025 · Aug 12, 2025
diff --git a/apps/circuit-compiler/src/app/components/toggler.tsx b/apps/circuit-compiler/src/app/components/toggler.tsx
@@ -17,7 +17,7 @@ export function Toggler ({ children, title, dataId, show = false, icon, iconTool
     <div className="pt-2 border-top pb-2">
       <div className="d-flex circuit_config_section justify-content-between" onClick={toggleConfigurations} data-id={dataId}>
         <div className="d-flex">
-          <label className="mt-1 circuit_config_section">
+          <label className="circuit_config_section">
             <FormattedMessage id={title} />
             { icon ? iconTooltip ? (
               <CustomTooltip

diff --git a/apps/contract-verification/src/app/components/ConfigInput.tsx b/apps/contract-verification/src/app/components/ConfigInput.tsx
@@ -37,7 +37,7 @@ export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, ini
   }
 
   return (
-    <div className="form-group small mb-0">
+    <div className="small mb-0">
       <label className='mt-3' htmlFor={id}>{label}</label>
       <div className="d-flex flex-row justify-content-start">
         <input

diff --git a/apps/contract-verification/src/app/components/ContractAddressInput.tsx b/apps/contract-verification/src/app/components/ContractAddressInput.tsx
@@ -24,9 +24,9 @@ export const ContractAddressInput: React.FC<ContractAddressInputProps> = ({ labe
   }
 
   return (
-    <div className="form-group">
+    <div className="mb-3">
       <label htmlFor={id}>{label}</label>
-      <div>{contractAddressError && <div className="text-danger">{contractAddressError}</div>}</div>
+      {contractAddressError && <div className="text-danger">{contractAddressError}</div>}
       <input type="text" className="form-control" id={id} placeholder="0x2738d13E81e..." value={contractAddress} onChange={handleAddressChange} />
     </div>
   )

diff --git a/apps/contract-verification/src/app/components/ContractDropdown.tsx b/apps/contract-verification/src/app/components/ContractDropdown.tsx
@@ -42,10 +42,10 @@ export const ContractDropdown: React.FC<ContractDropdownProps> = ({ label, id, s
   const hasContracts = compilationOutput && Object.keys(compilationOutput).length > 0
 
   return (
-    <div className="form-group">
+    <div className="mb-3">
       <label htmlFor={id}><FormattedMessage id="contract-verification.contractDropdownLabel" defaultMessage={label} values={{ label }} /></label>
       <select value={selectedContract ? JSON.stringify(selectedContract) : ''}
-        className={`form-control form-select pe-4 ${!hasContracts ? 'disabled-cursor text-warning' : ''}`}
+        className={`form-select pe-4 mt-1 ${!hasContracts ? 'disabled-cursor text-warning' : ''}`}
         id={id}
         disabled={!hasContracts}
         onChange={handleSelectContract}

diff --git a/apps/contract-verification/src/app/views/SettingsView.tsx b/apps/contract-verification/src/app/views/SettingsView.tsx
@@ -41,7 +41,7 @@ export const SettingsView = () => {
             <CustomTooltip tooltipText="Use Sourcify API v1 instead of v2. Necessary for alternative Sourcify instances that did not upgrade.">
               <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
                 <input
-                  className="form-check-input custom-control-input"
+                  className="form-check-input ms-1"
                   type="checkbox"
                   id="sourcify-use-v1-api"
                   checked={chainSettings.verifiers['Sourcify']?.useV1API ?? false}

diff --git a/apps/contract-verification/src/app/views/VerifyView.tsx b/apps/contract-verification/src/app/views/VerifyView.tsx
@@ -205,10 +205,10 @@ export const VerifyView = () => {
         abiEncodingError={abiEncodingError}
         setAbiEncodingError={setAbiEncodingError}
       />}
-      <div className="pt-3">
-        <div className="d-flex py-1 align-items-center form-check">
+      <div className="pt-1">
+        <div className="d-flex align-items-center form-check">
           <input id="has-proxy" className="form-check-input" type="checkbox" checked={!!hasProxy} onChange={(e) => setHasProxy(e.target.checked)} />
-          <label htmlFor="has-proxy" className="m-0 form-check-label" style={{ paddingTop: '2px' }}>
+          <label htmlFor="has-proxy" className="ms-1 form-check-label" style={{ paddingTop: '2px' }}>
             <FormattedMessage id="contract-verification.proxyInputLabel" defaultMessage={'The deployed contract is behind a proxy'} />
           </label>
         </div>
@@ -229,9 +229,9 @@ export const VerifyView = () => {
 
           return (
             <div key={verifierId} className="pt-2">
-              <div className="d-flex py-1 align-items-center form-check">
+              <div className="d-flex align-items-center form-check">
                 <input
-                  className="form-check-input"
+                  className="form-check-input mb-1"
                   type="checkbox"
                   id={`verifier-${verifierId}`}
                   checked={!!enabledVerifiers[verifierId]}
@@ -240,8 +240,8 @@ export const VerifyView = () => {
                 />
                 <label
                   htmlFor={`verifier-${verifierId}`}
-                  className={`m-0 form-check-label large  fw-bold${!disabledVerifier ? '' : ' text-secondary'}`}
-                  style={{ fontSize: '1rem', color: 'var(--text)' }}
+                  className={`ms-1 form-check-label large  fw-bold${!disabledVerifier ? '' : ' text-secondary'}`}
+                  style={{ fontSize: '1rem' }}
                 >
                   {verifierId}
                 </label>

diff --git a/apps/remix-ide/src/app/components/styles/bottom-bar.css b/apps/remix-ide/src/app/components/styles/bottom-bar.css
@@ -62,7 +62,6 @@
     display: inline-block;
     width: 18px;
     height: 10px;
-    margin-top: 5.5px;
 }
 
 .switch input {

diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -391,7 +391,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         }}
         type="checkbox"
       />
-      <label data-id="debugGeneratedSourcesLabel" className="pt-1 form-check-label" htmlFor="debugGeneratedSourcesInput">
+      <label data-id="debugGeneratedSourcesLabel" className="form-check-label" htmlFor="debugGeneratedSourcesInput">
         <FormattedMessage id="debugger.useGeneratedSources" />
         (Solidity {'>='} v0.7.2)
       </label>

diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
@@ -58,7 +58,7 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
       className={`${!state.isTxNumberValid ? 'disabled ' : ''} btn btn-primary btn-sm btn-block text-decoration-none`}
     >
       <button
-        className={`${!state.isTxNumberValid ? 'disabled ' : ''} btn btn-link btn-sm btn-block h-75 p-0 m-0 text-decoration-none`}
+        className={`${!state.isTxNumberValid ? 'disabled ' : ''} btn btn-link btn-sm btn-block h-100 p-0 m-0 text-decoration-none`}
         id="load"
         onClick={handleSubmit}
         data-id="debuggerTransactionStartButton"

diff --git a/libs/remix-ui/helper/src/lib/helper-components.tsx b/libs/remix-ui/helper/src/lib/helper-components.tsx
@@ -163,14 +163,14 @@ export const CompileOptions = ({ autoCompile, hideWarnings, setCircuitAutoCompil
         <FormattedMessage id="circuit.autoCompile" />
       </label>
     </div>
-    <div className="mt-1 mb-2 circuit_warnings_box form-check">
+    <div className="mt-1 mb-2 form-check">
       <input
         className="form-check-input"
         onChange={(e) => setCircuitHideWarnings(e.target.checked)}
-        id="hideCircuitWarnings"
         type="checkbox"
         title="Hide warnings"
         checked={hideWarnings}
+        id="hideCircuitWarnings"
       />
       <label className="form-check-label" htmlFor="hideCircuitWarnings" data-id="hide_circuit_warnings_checkbox_input">
         <FormattedMessage id="solidity.hideWarnings" />

diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -23,7 +23,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
           </label>
         </CustomTooltip>
         <CustomTooltip placement="top-start" tooltipClasses="text-nowrap" tooltipId="numOfDeployedInstancesTooltip" tooltipText="Number of deployed contracts">
-          <div className="badge rounded-pill text-bg-primary text-center ms-2 mb-1" data-id="deployedContractsBadge">{instanceList.length}</div>
+          <div className="badge rounded-pill text-bg-primary text-center ms-2" data-id="deployedContractsBadge">{instanceList.length}</div>
         </CustomTooltip>
         <div className="w-100"></div>
         {instanceList.length > 0 ? (

diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -37,7 +37,7 @@ export function RecorderUI(props: RecorderProps) {
     <div className="udapp_cardContainer py-1 list-group-item border-top border-bottom bg-dark" id="udappRecorderCard">
       <div className="udapp_recorderSection d-flex justify-content-between">
         <div className="d-flex justify-content-center align-items-center">
-          <label className="text-nowrap mt-1 udapp_recorderSectionLabel" onClick={toggleClass}>
+          <label className="text-nowrap udapp_recorderSectionLabel" onClick={toggleClass}>
             <FormattedMessage id="udapp.transactionsRecorded" />
           </label>
           <CustomTooltip

diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -898,7 +898,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
         </div>
         <div className="d-flex px-4 remixui_compilerConfigSection justify-content-between" onClick={toggleConfigurations}>
           <div className="d-flex">
-            <label className="mt-1 remixui_compilerConfigSection">
+            <label className="remixui_compilerConfigSection">
               <FormattedMessage id="solidity.advancedConfigurations" />
             </label>
           </div>

diff --git a/libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx b/libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx
@@ -823,7 +823,7 @@ export const SolidityUnitTesting = (props: Record<string, any>) => {
             placement={'top'}
           >
             <a className="btn border text-decoration-none pe-0 d-flex w-50 ms-2" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/unittesting.html#test-directory">
-              <label className="btn p-1 ms-2 m-0">
+              <label className="btn p-1 m-0">
                 <FormattedMessage id="solidityUnitTesting.howToUse" />
               </label>
             </a>
@@ -854,7 +854,7 @@ export const SolidityUnitTesting = (props: Record<string, any>) => {
             </button>
           </CustomTooltip>
         </div>
-        <div className="d-flex align-items-center ms-1 me-3 ps-1  pb-2 mt-2 border-bottom form-check">
+        <div className="d-flex align-items-center ms-2 me-3 pb-2 mt-2 border-bottom form-check">
           <input
             id="checkAllTests"
             className="form-check-input"
@@ -866,19 +866,19 @@ export const SolidityUnitTesting = (props: Record<string, any>) => {
           <label
             data-id="testTabCheckAllTests"
             htmlFor="checkAllTests"
-            className="form-check-label mb-0 ms-4 form-check-label text-nowrap"
+            className="form-check-label mb-0 ms-1 text-nowrap"
             style={{ paddingTop: '0.125rem' }}
           >
             {' '}
             <FormattedMessage id="solidityUnitTesting.selectAll" />{' '}
           </label>
         </div>
-        <div className="testList ms-1 pe-2 mt-0 border-bottom py-2">
+        <div className="testList ms-2 pe-2 mt-0 border-bottom py-2">
           {testFiles.length
             ? testFiles.map((testFileObj: TestObject, index) => {
               const elemId = `singleTest${testFileObj.fileName}`
               return (
-                <div className="d-flex align-items-center ps-1 form-check" key={index}>
+                <div className="d-flex align-items-center form-check" key={index}>
                   <input
                     className="singleTest form-check-input"
                     id={elemId}
@@ -889,7 +889,7 @@ export const SolidityUnitTesting = (props: Record<string, any>) => {
                   <label
                     data-id="singleTest"
                     id={"id" + elemId}
-                    className="singleTestLabel text-nowrap mb-0 form-check-label ms-4 form-check-label text-nowrap"
+                    className="singleTestLabel text-nowrap mb-0 form-check-label ms-1 text-nowrap"
                     htmlFor={elemId}
                     style={{ paddingTop: '0.125rem' }}
                   >

diff --git a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu.tsx b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu.tsx
@@ -38,7 +38,7 @@ export const RemixUITerminalMenu = (props: RemixUiTerminalProps) => {
     >
       <div className="h-80 mx-3 align-items-center remix_ui_terminal_listenOnNetwork form-check">
         <input
-          className="form-check-input"
+          className="form-check-input mt-1"
           id="listenNetworkCheck"
           onChange={listenOnNetwork}
           type="checkbox"

diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -295,7 +295,7 @@ export const FlatTree = (props: FlatTreeProps) => {
   }
 
   return (<>
-    <div ref={containerRef} className='h-100 ps-1'>
+    <div ref={containerRef} className='h-100 ps-1 mt-1'>
       <FlatTreeDrop
         dragSource={dragSource}
         getFlatTreeItem={getFlatTreeItem}