From 1099afe1161e880c68a20f917efa412d4f62cf33 Mon Sep 17 00:00:00 2001
From: Aniket-Engg <aniketengg.225@gmail.com>
Date: Tue, 12 May 2026 14:26:21 +0530
Subject: [PATCH 1/8] fix user menu hover

---
 .../login/src/lib/user-menu-compact.css        | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/libs/remix-ui/login/src/lib/user-menu-compact.css b/libs/remix-ui/login/src/lib/user-menu-compact.css
index e3a49d8f605..1900a8974bc 100644
--- a/libs/remix-ui/login/src/lib/user-menu-compact.css
+++ b/libs/remix-ui/login/src/lib/user-menu-compact.css
@@ -134,8 +134,10 @@
   transition: background-color 0.2s;
 }
 
-.user-menu-item:hover {
-  background-color: var(--bs-body-bg, #222336);
+.user-menu-items-container .dropdown-item.user-menu-item:hover,
+.user-menu-items-container .dropdown-item.user-menu-item:focus {
+  background-color: var(--bs-dropdown-link-hover-bg);
+  color: var(--bs-dropdown-link-hover-color);
 }
 
 .user-menu-item-icon {
@@ -155,8 +157,10 @@
   transition: background-color 0.2s;
 }
 
-.user-menu-credits-item:hover {
-  background-color: var(--bs-body-bg, #222336);
+.user-menu-items-container .dropdown-item.user-menu-credits-item:hover,
+.user-menu-items-container .dropdown-item.user-menu-credits-item:focus {
+  background-color: var(--bs-dropdown-link-hover-bg);
+  color: var(--bs-dropdown-link-hover-color);
 }
 
 .user-menu-credits-icon {
@@ -189,8 +193,10 @@
   font-weight: 500;
 }
 
-.user-menu-item-danger:hover {
-  background-color: var(--bs-body-bg, #222336);
+.user-menu-items-container .dropdown-item.user-menu-item-danger:hover,
+.user-menu-items-container .dropdown-item.user-menu-item-danger:focus {
+  background-color: var(--bs-dropdown-link-hover-bg);
+  color: var(--bs-dropdown-link-hover-color);
 }
 
 .user-menu-theme-toggle {

From ee19309e74dfdebc7d5718f6634ea3bbb01e0645 Mon Sep 17 00:00:00 2001
From: Aniket-Engg <aniketengg.225@gmail.com>
Date: Tue, 12 May 2026 18:05:44 +0530
Subject: [PATCH 2/8] update deploy method hover

---
 libs/remix-ui/run-tab-deploy/src/lib/css/index.css         | 6 ++----
 .../run-tab-deployed-contracts/src/lib/css/index.css       | 7 +++++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/run-tab-deploy/src/lib/css/index.css b/libs/remix-ui/run-tab-deploy/src/lib/css/index.css
index b17dcd9046f..b82ce505b4a 100644
--- a/libs/remix-ui/run-tab-deploy/src/lib/css/index.css
+++ b/libs/remix-ui/run-tab-deploy/src/lib/css/index.css
@@ -5,8 +5,6 @@
     background-color: var(--custom-onsurface-layer-3) !important;
 }
 .contract-dropdown-item-hover:hover, .unit-dropdown-item:hover, .unit-dropdown-item-hover:hover {
-    background-color: var(--custom-onsurface-layer-3) !important;
-    border: 1px solid var(--bs-border-color) !important;
-    border-radius: 0 !important;
-    color: var(--theme-text-color, white) !important;
+    background-color: var(--bs-dropdown-link-hover-bg) !important;
+    color: var(--bs-dropdown-link-hover-color) !important;
 }
\ No newline at end of file
diff --git a/libs/remix-ui/run-tab-deployed-contracts/src/lib/css/index.css b/libs/remix-ui/run-tab-deployed-contracts/src/lib/css/index.css
index 0587cb1c682..85909753ed5 100644
--- a/libs/remix-ui/run-tab-deployed-contracts/src/lib/css/index.css
+++ b/libs/remix-ui/run-tab-deployed-contracts/src/lib/css/index.css
@@ -135,3 +135,10 @@
   animation: none;
   box-shadow: 0 6px 16px rgba(100, 196, 255, 0.8) !important;
 }
+
+/* Fix hover for function dropdown items */
+.dropdown-item[data-id*="deployedContractItem"][data-id*="function"]:hover,
+.dropdown-item[data-id*="deployedContractItem"][data-id*="function"]:focus {
+  background-color: var(--bs-dropdown-link-hover-bg) !important;
+  color: var(--bs-dropdown-link-hover-color) !important;
+}

From bc7e58ddf1989b39dcdcc1bea340a6a1db9ae303 Mon Sep 17 00:00:00 2001
From: Aniket-Engg <aniketengg.225@gmail.com>
Date: Tue, 12 May 2026 18:21:53 +0530
Subject: [PATCH 3/8] recorder and deployed clear all similar

---
 .../remix-ide/src/app/tabs/locales/en/udapp.json |  4 ++--
 .../widgets/deployedContractsPortraitView.tsx    |  4 ++--
 .../src/lib/widgets/TransactionsPortraitView.tsx | 16 +++++++++-------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/locales/en/udapp.json b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
index 16bdcc3e100..4bc13a9180d 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/udapp.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
@@ -200,8 +200,8 @@
   "udapp.noABIAvailable": "No ABI available",
   "udapp.noBytecodeAvailable": "No bytecode available",
   "udapp.transactionRecorderTitle": "Transactions recorder",
-  "udapp.yesClearAll": "Yes clear all",
-  "udapp.yesClearAllTransactions": "Yes clear all",
+  "udapp.yesClearAll": "Yes, Clear All",
+  "udapp.yesClearAllTransactions": "Yes, Clear All",
   "udapp.viewSourceCode": "View Source Code",
   "udapp.themes": "Themes",
   "udapp.verifyContract": "Verify Contract on Explorers",
diff --git a/libs/remix-ui/run-tab-deployed-contracts/src/lib/widgets/deployedContractsPortraitView.tsx b/libs/remix-ui/run-tab-deployed-contracts/src/lib/widgets/deployedContractsPortraitView.tsx
index bb31eae62c7..dd2acfa1ff6 100644
--- a/libs/remix-ui/run-tab-deployed-contracts/src/lib/widgets/deployedContractsPortraitView.tsx
+++ b/libs/remix-ui/run-tab-deployed-contracts/src/lib/widgets/deployedContractsPortraitView.tsx
@@ -299,11 +299,11 @@ export default function DeployedContractsPortraitView() {
               <FormattedMessage id="udapp.cancel" defaultMessage="Cancel" />
             </button>
             <button
-              className="btn btn-sm btn-danger text-light flex-fill"
+              className="btn btn-sm btn-danger flex-fill"
               onClick={handleConfirmClearAll}
               data-id="confirmClearAll"
             >
-              <FormattedMessage id="udapp.yesClearAll" defaultMessage="Yes clear all" />
+              <FormattedMessage id="udapp.yesClearAll" defaultMessage="Yes, Clear All" />
             </button>
           </div>
         </div>
diff --git a/libs/remix-ui/run-tab-transactions/src/lib/widgets/TransactionsPortraitView.tsx b/libs/remix-ui/run-tab-transactions/src/lib/widgets/TransactionsPortraitView.tsx
index e5391329f10..12c4ef3e15f 100644
--- a/libs/remix-ui/run-tab-transactions/src/lib/widgets/TransactionsPortraitView.tsx
+++ b/libs/remix-ui/run-tab-transactions/src/lib/widgets/TransactionsPortraitView.tsx
@@ -248,23 +248,25 @@ function TransactionsPortraitView() {
           {/* Clear All Confirmation Dialog */}
           {showClearAllDialog && (
             <div className="m-3 mt-0 p-3 rounded" style={{ backgroundColor: 'var(--custom-onsurface-layer-2)' }}>
-              <div className="d-flex justify-content-between align-items-center mb-2 text-theme-contrast">
-                <p className="mb-0" style={{ fontSize: '0.9rem' }}>
+              <div className="d-flex justify-content-between align-items-center mb-2">
+                <p className="mb-0 text-danger text-theme-contrast" style={{ fontSize: '0.9rem' }}>
                   <FormattedMessage
                     id="udapp.clearAllTransactionsTitle"
                     defaultMessage="Clear all transactions"
                   />
                 </p>
                 <button
-                  className="btn btn-sm text-theme-contrast"
+                  className="btn btn-sm"
                   onClick={() => {
                     trackMatomoEvent?.({ category: 'udapp', action: 'transactionsClearAllDialogClose', name: 'close_button', isClick: true })
                     handleCancelClearAll()
                   }}
                   style={{
-                    background: 'none',
+                    background: 'transparent',
                     border: 'none',
-                    fontSize: '1.2rem',
+                    color: 'var(--bs-quaternary)',
+                    fontSize: '1.5rem',
+                    lineHeight: 1,
                     padding: 0
                   }}
                 > × </button>
@@ -285,11 +287,11 @@ function TransactionsPortraitView() {
                   <FormattedMessage id="udapp.cancel" defaultMessage="Cancel" />
                 </button>
                 <button
-                  className={`btn btn-sm btn-danger text-theme-contrast flex-fill`}
+                  className="btn btn-sm btn-danger flex-fill"
                   onClick={handleConfirmClearAll}
                   data-id="confirmClearAllTransactions"
                 >
-                  <FormattedMessage id="udapp.yesClearAllTransactions" defaultMessage="Yes clear all" />
+                  <FormattedMessage id="udapp.yesClearAllTransactions" defaultMessage="Yes, Clear All" />
                 </button>
               </div>
             </div>

From b3ba54cdd4b04af8d617a1b1ebadd78df240c0ca Mon Sep 17 00:00:00 2001
From: Aniket-Engg <aniketengg.225@gmail.com>
Date: Tue, 12 May 2026 18:35:48 +0530
Subject: [PATCH 4/8] fix env reset

---
 apps/remix-dapp/src/locales/en/udapp.json                | 2 +-
 apps/remix-ide/src/app/tabs/locales/en/udapp.json        | 4 ++--
 libs/remix-ui/run-tab-deploy/src/lib/css/index.css       | 8 +++++++-
 .../run-tab-environment/src/lib/components/resetUI.tsx   | 9 ++-------
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/remix-dapp/src/locales/en/udapp.json b/apps/remix-dapp/src/locales/en/udapp.json
index 764fc312368..ab91c7bc8c4 100644
--- a/apps/remix-dapp/src/locales/en/udapp.json
+++ b/apps/remix-dapp/src/locales/en/udapp.json
@@ -58,7 +58,7 @@
   "udapp.resetVmStateDesc1": "Resetting the state of this VM will delete the associated transaction details in this Workspace.",
   "udapp.resetVmStateDesc2": "It will also delete the data of contracts deployed and pinned in this Workspace.",
   "udapp.resetVmStateDesc3": "Do you want to continue?",
-  "udapp.reset": "Yes reset",
+  "udapp.reset": "Yes, Reset",
   "udapp.delete": "Delete",
   "udapp.injectedTitle": "Unfortunately it's not possible to create an account using injected provider. Please create the account directly from your provider (i.e metamask or other of the same type).",
   "udapp.createSmartAccount": "Create a Safe Smart Account",
diff --git a/apps/remix-ide/src/app/tabs/locales/en/udapp.json b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
index 4bc13a9180d..466f1add245 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/udapp.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
@@ -59,8 +59,8 @@
   "udapp.resetVmStateDesc2": "It will also delete the data of contracts deployed and pinned in this Workspace.",
   "udapp.resetVmStateDesc3": "Do you want to continue?",
   "udapp.reset": "Reset",
-  "udapp.yesReset": "Yes reset",
-  "udapp.cancelReset": "Cancel reset",
+  "udapp.yesReset": "Yes, Reset",
+  "udapp.cancelReset": "Cancel",
   "udapp.delete": "Delete",
   "udapp.injectedTitle": "Unfortunately it's not possible to create an account using injected provider. Please create the account directly from your provider (i.e metamask or other of the same type).",
   "udapp.createSmartAccount": "Create a Safe Smart Account",
diff --git a/libs/remix-ui/run-tab-deploy/src/lib/css/index.css b/libs/remix-ui/run-tab-deploy/src/lib/css/index.css
index b82ce505b4a..e5c645ce004 100644
--- a/libs/remix-ui/run-tab-deploy/src/lib/css/index.css
+++ b/libs/remix-ui/run-tab-deploy/src/lib/css/index.css
@@ -4,7 +4,13 @@
 .deploy-address-toggle:hover {
     background-color: var(--custom-onsurface-layer-3) !important;
 }
-.contract-dropdown-item-hover:hover, .unit-dropdown-item:hover, .unit-dropdown-item-hover:hover {
+.contract-dropdown-item-hover:hover {
+    background-color: var(--custom-onsurface-layer-3) !important;
+    border: 1px solid var(--bs-border-color) !important;
+    border-radius: 0 !important;
+    color: var(--theme-text-color, white) !important;
+}
+.unit-dropdown-item:hover, .unit-dropdown-item-hover:hover {
     background-color: var(--bs-dropdown-link-hover-bg) !important;
     color: var(--bs-dropdown-link-hover-color) !important;
 }
\ No newline at end of file
diff --git a/libs/remix-ui/run-tab-environment/src/lib/components/resetUI.tsx b/libs/remix-ui/run-tab-environment/src/lib/components/resetUI.tsx
index f5fc4f7c393..5da3450be38 100644
--- a/libs/remix-ui/run-tab-environment/src/lib/components/resetUI.tsx
+++ b/libs/remix-ui/run-tab-environment/src/lib/components/resetUI.tsx
@@ -56,25 +56,20 @@ export function ResetUI() {
         </div>
         <div className="d-flex justify-content-between align-items-center gap-3">
           <button
-            className="btn btn-sm btn-secondary rounded"
+            className="btn btn-sm btn-secondary flex-fill"
             onClick={() => {
               trackMatomoEvent?.({ category: 'udapp', action: 'resetCancel', name: 'cancelled', isClick: true })
               dispatch({ type: 'HIDE_RESET_UI', payload: undefined })
             }}
             disabled={widgetState.fork.isRequesting}
-            style={{ color: themeQuality === 'dark' ? 'white' : 'black', flex: 1 }}
           >
             {intl.formatMessage({ id: 'udapp.cancelReset' })}
           </button>
           <button
             data-id="btnResetState"
-            className="btn btn-sm btn-danger rounded text-light"
+            className="btn btn-sm btn-danger flex-fill"
             onClick={handleSubmit}
             disabled={widgetState.fork.isRequesting}
-            style={{
-              border: 'none',
-              flex: 1
-            }}
           >
             {widgetState.fork.isRequesting ? <Spinner animation="border" size="sm" /> : intl.formatMessage({ id: 'udapp.yesReset' })}
           </button>

From 7e1f4497088376d25fa86affb187dbbcd91c8068 Mon Sep 17 00:00:00 2001
From: Aniket-Engg <aniketengg.225@gmail.com>
Date: Tue, 12 May 2026 19:11:13 +0530
Subject: [PATCH 5/8] improve display for function dropdown

---
 .../src/lib/components/DeployedContractItem.tsx      | 12 ++++++------
 .../src/lib/components/envCategoryUI.tsx             |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx b/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
index e7837920292..88a8d62fa8f 100644
--- a/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
+++ b/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
@@ -674,21 +674,21 @@ Before generating, please ask me about my design preferences first.`
                             className="btn btn-outline-secondary w-100 d-flex align-items-center justify-content-between"
                             style={{
                               backgroundColor: 'var(--custom-onsurface-layer-3)',
-                              border: '1px solid var(--custom-onsurface-layer-4)',
+                              border: '1px solid var(--bs-border-color)',
                               color: 'var(--dark/text-secondary, #d5d7e3)',
                               padding: '8px 12px'
                             }}
                             icon="fas fa-caret-down"
                             useDefaultIcon={false}
                           >
-                            <div className="d-flex align-items-center gap-1 flex-fill text-start">
-                              <span style={{ color: 'var(--text-tertiary, #a2a3bd)' }}>Select a function to interact with...</span>
+                            <div className="d-flex align-items-center gap-1" style={{ flex: '1', minWidth: 0 }}>
+                              <span style={{ color: 'var(--text-tertiary, #a2a3bd)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Select a function to interact with...</span>
                             </div>
                           </Dropdown.Toggle>
                           <Dropdown.Menu
                             style={{
                               backgroundColor: 'var(--custom-onsurface-layer-2)',
-                              border: '1px solid var(--custom-onsurface-layer-4)',
+                              border: '1px solid var(--bs-border-color)',
                               maxHeight: '240px',
                               overflowY: 'auto',
                               width: '100%',
@@ -697,7 +697,7 @@ Before generating, please ask me about my design preferences first.`
                           >
                             <div style={{
                               padding: '8px',
-                              borderBottom: '1px solid var(--custom-onsurface-layer-4)',
+                              borderBottom: '1px solid var(--bs-border-color)',
                               backgroundColor: 'var(--custom-onsurface-layer-2)'
                             }}>
                               <input
@@ -712,7 +712,7 @@ Before generating, please ask me about my design preferences first.`
                                 onClick={(e) => e.stopPropagation()}
                                 style={{
                                   backgroundColor: 'var(--custom-onsurface-layer-3)',
-                                  border: '1px solid var(--custom-onsurface-layer-4)',
+                                  border: '1px solid var(--bs-border-color)',
                                   color: 'var(--dark/text-secondary, #d5d7e3)',
                                   fontSize: '11px'
                                 }}
diff --git a/libs/remix-ui/run-tab-environment/src/lib/components/envCategoryUI.tsx b/libs/remix-ui/run-tab-environment/src/lib/components/envCategoryUI.tsx
index 402e309bc11..302036d3266 100644
--- a/libs/remix-ui/run-tab-environment/src/lib/components/envCategoryUI.tsx
+++ b/libs/remix-ui/run-tab-environment/src/lib/components/envCategoryUI.tsx
@@ -59,7 +59,7 @@ export const EnvCategoryUI: React.FC<EnvCategoryUIProps> = ({ isOpen, onToggle }
         e.stopPropagation()
       }}
     >
-      <Dropdown.Toggle as={CustomToggle} data-id="settingsSelectEnvCategoryOptions" className="btn btn-secondary w-100 d-inline-block pe-0 border-0" icon="fas fa-caret-down text-secondary ms-2" useDefaultIcon={false} style={{ backgroundColor: 'var(--custom-onsurface-layer-3)' }}>
+      <Dropdown.Toggle as={CustomToggle} data-id="settingsSelectEnvCategoryOptions" className="btn btn-secondary w-100 d-inline-block pe-0" icon="fas fa-caret-down text-secondary ms-2" useDefaultIcon={false} style={{ backgroundColor: 'var(--custom-onsurface-layer-3)', border: '1px solid var(--bs-border-color)' }}>
         <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
           <div className="text-truncate text-secondary">
             {<span data-id="selectedVersion">{enforceSelect ? '<select>' : provider?.displayName}</span>}
@@ -67,7 +67,7 @@ export const EnvCategoryUI: React.FC<EnvCategoryUIProps> = ({ isOpen, onToggle }
         </div>
       </Dropdown.Toggle>
 
-      <Dropdown.Menu as={CustomMenu} className="custom-dropdown-items overflow-hidden" style={{ backgroundColor: 'var(--custom-onsurface-layer-3)', zIndex: 1000, '--theme-text-color': themeQuality === 'dark' ? 'white' : 'black', padding: 0, minWidth: 'max-content', width: 'auto' } as React.CSSProperties}>
+      <Dropdown.Menu as={CustomMenu} className="custom-dropdown-items overflow-hidden" style={{ backgroundColor: 'var(--custom-onsurface-layer-3)', border: '1px solid var(--bs-border-color)', zIndex: 1000, '--theme-text-color': themeQuality === 'dark' ? 'white' : 'black', padding: 0, minWidth: 'max-content', width: 'auto' } as React.CSSProperties}>
         { (provider?.category === 'Dev' || provider?.category === 'Browser Extension') && <Dropdown.Item onClick={() => {
           setEnforceSelect(true)
           dispatch({ type: 'CLEAR_ALL_ACCOUNTS', payload: null })

From a487a4a1c3c34815002ca8d7ead217fbeb6c5b26 Mon Sep 17 00:00:00 2001
From: Aniket-Engg <aniketengg.225@gmail.com>
Date: Tue, 19 May 2026 16:39:34 +0530
Subject: [PATCH 6/8] add border to calldata and params button

---
 .../src/lib/components/DeployedContractItem.tsx             | 4 ++--
 .../run-tab-deployed-contracts/src/lib/css/index.css        | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx b/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
index 88a8d62fa8f..784016e7c0f 100644
--- a/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
+++ b/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
@@ -916,7 +916,7 @@ Before generating, please ask me about my design preferences first.`
                         getContent={() => getEncodedCall(selectedFunctionIndex)}
                       >
                         <button
-                          className="btn btn-sm flex-fill border-0"
+                          className="btn btn-sm flex-fill"
                           style={{ minWidth: '100px', backgroundColor: 'var(--custom-onsurface-layer-3)' }}
                           data-id={`copyCalldata-${selectedFunctionIndex}`}
                         >
@@ -933,7 +933,7 @@ Before generating, please ask me about my design preferences first.`
                         getContent={() => getEncodedParams(selectedFunctionIndex)}
                       >
                         <button
-                          className="btn btn-sm flex-fill border-0"
+                          className="btn btn-sm flex-fill"
                           style={{ minWidth: '100px', backgroundColor: 'var(--custom-onsurface-layer-3)' }}
                           data-id={`copyParameters-${selectedFunctionIndex}`}
                         >
diff --git a/libs/remix-ui/run-tab-deployed-contracts/src/lib/css/index.css b/libs/remix-ui/run-tab-deployed-contracts/src/lib/css/index.css
index 85909753ed5..ba664a697d5 100644
--- a/libs/remix-ui/run-tab-deployed-contracts/src/lib/css/index.css
+++ b/libs/remix-ui/run-tab-deployed-contracts/src/lib/css/index.css
@@ -142,3 +142,9 @@
   background-color: var(--bs-dropdown-link-hover-bg) !important;
   color: var(--bs-dropdown-link-hover-color) !important;
 }
+
+/* Add border to copy buttons */
+button[data-id^="copyCalldata"],
+button[data-id^="copyParameters"] {
+  border: 1px solid var(--bs-border-color) !important;
+}

From cc0881dbccc597bcb4a500106338ca0596a2d151 Mon Sep 17 00:00:00 2001
From: Aniket-Engg <aniketengg.225@gmail.com>
Date: Tue, 19 May 2026 17:15:06 +0530
Subject: [PATCH 7/8] tooltip for gas limit

---
 .../src/app/tabs/locales/en/udapp.json        |   3 +
 .../src/lib/widgets/deployPortraitView.tsx    | 124 +++++++++++-------
 .../lib/components/DeployedContractItem.tsx   | 124 +++++++++++-------
 3 files changed, 162 insertions(+), 89 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/locales/en/udapp.json b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
index 466f1add245..cba386cd2f5 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/udapp.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
@@ -5,6 +5,9 @@
   "udapp.gasLimit": "Gas limit",
   "udapp.gasLimitAuto": "Estimated Gas",
   "udapp.gasLimitManual": "Custom",
+  "udapp.gasLimitAutoTooltip": "Currently using auto estimated gas. Click on auto to set custom gas limit",
+  "udapp.gasLimitBadgeAutoTooltip": "Click to set custom gas limit",
+  "udapp.gasLimitBadgeCustomTooltip": "Click to use auto estimated gas",
   "udapp.tooltipText4": "Enter custom Gas Limit.",
 
   "udapp._comment_value.tsx": "libs/remix-ui/run-tab/src/lib/components/value.tsx",
diff --git a/libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx b/libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx
index c06d13cde4c..7845234b014 100644
--- a/libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx
+++ b/libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Dropdown } from 'react-bootstrap'
-import { AddressToggle, CustomMenu, CustomToggle, extractNameFromKey, getMultiValsString, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress } from '@remix-ui/helper'
+import { AddressToggle, CustomMenu, CustomToggle, CustomTooltip, extractNameFromKey, getMultiValsString, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress } from '@remix-ui/helper'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { DeployAppContext } from '../contexts'
 import { Provider } from '@remix-ui/run-tab-environment'
@@ -771,51 +771,85 @@ function DeployPortraitView() {
                   <FormattedMessage id="udapp.gasLimit" defaultMessage="Gas limit" />
                 </label>
                 <div className="position-relative flex-fill">
-                  <span
-                    className="p-1 pt-0 rounded"
-                    style={{
-                      position: 'absolute',
-                      left: '0.5rem',
-                      top: '50%',
-                      transform: 'translateY(-50%)',
-                      backgroundColor: 'var(--custom-onsurface-layer-2)',
-                      color: 'var(--bs-primary)',
-                      cursor: 'pointer',
-                      zIndex: 1
-                    }}
-                    onClick={() => {
-                      const newMode = widgetState.gasLimit === 0 ? 'custom' : 'auto'
-                      trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitToggle', name: newMode, isClick: true })
-                      if (widgetState.gasLimit === 0) {
-                        // Switch from auto to custom - set a default value
-                        dispatch({ type: 'SET_GAS_LIMIT', payload: 3000000 })
-                      } else {
-                        // Switch from custom to auto - set to 0
-                        dispatch({ type: 'SET_GAS_LIMIT', payload: 0 })
-                      }
-                    }}
+                  <CustomTooltip
+                    placement="top"
+                    tooltipId="gasLimitBadgeTooltip"
+                    tooltipText={widgetState.gasLimit === 0 ? intl.formatMessage({ id: 'udapp.gasLimitBadgeAutoTooltip', defaultMessage: 'Click to set custom gas limit' }) : intl.formatMessage({ id: 'udapp.gasLimitBadgeCustomTooltip', defaultMessage: 'Click to use auto estimated gas' })}
                   >
-                    {widgetState.gasLimit === 0 ? 'auto' : 'custom'}
-                  </span>
-                  <input
-                    type="number"
-                    className="form-control form-control-sm border-0"
-                    placeholder="0000000"
-                    value={widgetState.gasLimit}
-                    onChange={(e) => {
-                      trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitInput', name: e.target.value })
-                      dispatch({ type: 'SET_GAS_LIMIT', payload: parseInt(e.target.value) })
-                    }}
-                    disabled={widgetState.gasLimit === 0}
-                    style={{
-                      backgroundColor: 'var(--bs-body-bg)',
-                      color: themeQuality === 'dark' ? 'white' : 'black',
-                      flex: 1,
-                      paddingLeft: '4rem',
-                      opacity: widgetState.gasLimit === 0 ? 0.6 : 1,
-                      cursor: widgetState.gasLimit === 0 ? 'not-allowed' : 'text'
-                    }}
-                  />
+                    <span
+                      className="p-1 pt-0 rounded"
+                      style={{
+                        position: 'absolute',
+                        left: '0.5rem',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        backgroundColor: 'var(--custom-onsurface-layer-2)',
+                        color: 'var(--bs-primary)',
+                        cursor: 'pointer',
+                        zIndex: 1
+                      }}
+                      onClick={() => {
+                        const newMode = widgetState.gasLimit === 0 ? 'custom' : 'auto'
+                        trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitToggle', name: newMode, isClick: true })
+                        if (widgetState.gasLimit === 0) {
+                          // Switch from auto to custom - set a default value
+                          dispatch({ type: 'SET_GAS_LIMIT', payload: 3000000 })
+                        } else {
+                          // Switch from custom to auto - set to 0
+                          dispatch({ type: 'SET_GAS_LIMIT', payload: 0 })
+                        }
+                      }}
+                    >
+                      {widgetState.gasLimit === 0 ? 'auto' : 'custom'}
+                    </span>
+                  </CustomTooltip>
+                  {widgetState.gasLimit === 0 ? (
+                    <CustomTooltip
+                      placement="top"
+                      tooltipId="gasLimitInputTooltip"
+                      tooltipText={intl.formatMessage({ id: 'udapp.gasLimitAutoTooltip', defaultMessage: 'Currently using auto estimated gas. Click on auto to set custom gas limit' })}
+                    >
+                      <input
+                        type="number"
+                        className="form-control form-control-sm border-0"
+                        placeholder="0000000"
+                        value={widgetState.gasLimit}
+                        onChange={(e) => {
+                          trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitInput', name: e.target.value })
+                          dispatch({ type: 'SET_GAS_LIMIT', payload: parseInt(e.target.value) })
+                        }}
+                        disabled={widgetState.gasLimit === 0}
+                        style={{
+                          backgroundColor: 'var(--bs-body-bg)',
+                          color: themeQuality === 'dark' ? 'white' : 'black',
+                          flex: 1,
+                          paddingLeft: '4rem',
+                          opacity: widgetState.gasLimit === 0 ? 0.6 : 1,
+                          cursor: widgetState.gasLimit === 0 ? 'not-allowed' : 'text'
+                        }}
+                      />
+                    </CustomTooltip>
+                  ) : (
+                    <input
+                      type="number"
+                      className="form-control form-control-sm border-0"
+                      placeholder="0000000"
+                      value={widgetState.gasLimit}
+                      onChange={(e) => {
+                        trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitInput', name: e.target.value })
+                        dispatch({ type: 'SET_GAS_LIMIT', payload: parseInt(e.target.value) })
+                      }}
+                      disabled={widgetState.gasLimit === 0}
+                      style={{
+                        backgroundColor: 'var(--bs-body-bg)',
+                        color: themeQuality === 'dark' ? 'white' : 'black',
+                        flex: 1,
+                        paddingLeft: '4rem',
+                        opacity: widgetState.gasLimit === 0 ? 0.6 : 1,
+                        cursor: widgetState.gasLimit === 0 ? 'not-allowed' : 'text'
+                      }}
+                    />
+                  )}
                 </div>
               </div>
 
diff --git a/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx b/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
index 784016e7c0f..fc3981c4e60 100644
--- a/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
+++ b/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
@@ -1034,51 +1034,87 @@ Before generating, please ask me about my design preferences first.`
                       <FormattedMessage id="udapp.gasLimitLabel" />
                     </label>
                     <div className="position-relative flex-fill">
-                      <span
-                        className="badge font-sm"
-                        style={{
-                          position: 'absolute',
-                          left: '0.35rem',
-                          top: '50%',
-                          transform: 'translateY(-50%)',
-                          backgroundColor: '#64C4FF14',
-                          color: '#64c4ff',
-                          cursor: 'pointer',
-                          zIndex: 1
-                        }}
-                        onClick={() => {
-                          const newMode = gasLimit === 0 ? 'custom' : 'auto'
-                          trackMatomoEvent?.({ category: 'udapp', action: 'deployedContractGasLimitToggle', name: newMode, isClick: true })
-                          if (gasLimit === 0) {
-                            setGasLimit(3000000)
-                          } else {
-                            setGasLimit(0)
-                          }
-                        }}
+                      <CustomTooltip
+                        placement="top"
+                        tooltipId="deployedContractGasLimitBadgeTooltip"
+                        tooltipText={gasLimit === 0 ? intl.formatMessage({ id: 'udapp.gasLimitBadgeAutoTooltip', defaultMessage: 'Click to set custom gas limit' }) : intl.formatMessage({ id: 'udapp.gasLimitBadgeCustomTooltip', defaultMessage: 'Click to use auto estimated gas' })}
                       >
-                        {gasLimit === 0 ? 'auto' : 'custom'}
-                      </span>
-                      <input
-                        type="number"
-                        className="form-control form-control-sm border-0"
-                        placeholder="3000000"
-                        value={gasLimit}
-                        onChange={(e) => {
-                          trackMatomoEvent?.({ category: 'udapp', action: 'deployedContractGasLimitInput', name: e.target.value })
-                          setGasLimit(parseInt(e.target.value))
-                        }}
-                        disabled={gasLimit === 0}
-                        style={{
-                          color: 'var(--dark/text-quaternary, #959bad)',
-                          flex: 1,
-                          paddingLeft: '4rem',
-                          textAlign: 'right',
-                          opacity: gasLimit === 0 ? 0.6 : 1,
-                          cursor: gasLimit === 0 ? 'not-allowed' : 'text',
-                          fontSize: '0.7rem',
-                          minHeight: '30px'
-                        }}
-                      />
+                        <span
+                          className="badge font-sm"
+                          style={{
+                            position: 'absolute',
+                            left: '0.35rem',
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            backgroundColor: '#64C4FF14',
+                            color: '#64c4ff',
+                            cursor: 'pointer',
+                            zIndex: 1
+                          }}
+                          onClick={() => {
+                            const newMode = gasLimit === 0 ? 'custom' : 'auto'
+                            trackMatomoEvent?.({ category: 'udapp', action: 'deployedContractGasLimitToggle', name: newMode, isClick: true })
+                            if (gasLimit === 0) {
+                              setGasLimit(3000000)
+                            } else {
+                              setGasLimit(0)
+                            }
+                          }}
+                        >
+                          {gasLimit === 0 ? 'auto' : 'custom'}
+                        </span>
+                      </CustomTooltip>
+                      {gasLimit === 0 ? (
+                        <CustomTooltip
+                          placement="top"
+                          tooltipId="deployedContractGasLimitInputTooltip"
+                          tooltipText={intl.formatMessage({ id: 'udapp.gasLimitAutoTooltip', defaultMessage: 'Currently using auto estimated gas. Click on auto to set custom gas limit' })}
+                        >
+                          <input
+                            type="number"
+                            className="form-control form-control-sm border-0"
+                            placeholder="3000000"
+                            value={gasLimit}
+                            onChange={(e) => {
+                              trackMatomoEvent?.({ category: 'udapp', action: 'deployedContractGasLimitInput', name: e.target.value })
+                              setGasLimit(parseInt(e.target.value))
+                            }}
+                            disabled={gasLimit === 0}
+                            style={{
+                              color: 'var(--dark/text-quaternary, #959bad)',
+                              flex: 1,
+                              paddingLeft: '4rem',
+                              textAlign: 'right',
+                              opacity: gasLimit === 0 ? 0.6 : 1,
+                              cursor: gasLimit === 0 ? 'not-allowed' : 'text',
+                              fontSize: '0.7rem',
+                              minHeight: '30px'
+                            }}
+                          />
+                        </CustomTooltip>
+                      ) : (
+                        <input
+                          type="number"
+                          className="form-control form-control-sm border-0"
+                          placeholder="3000000"
+                          value={gasLimit}
+                          onChange={(e) => {
+                            trackMatomoEvent?.({ category: 'udapp', action: 'deployedContractGasLimitInput', name: e.target.value })
+                            setGasLimit(parseInt(e.target.value))
+                          }}
+                          disabled={gasLimit === 0}
+                          style={{
+                            color: 'var(--dark/text-quaternary, #959bad)',
+                            flex: 1,
+                            paddingLeft: '4rem',
+                            textAlign: 'right',
+                            opacity: gasLimit === 0 ? 0.6 : 1,
+                            cursor: gasLimit === 0 ? 'not-allowed' : 'text',
+                            fontSize: '0.7rem',
+                            minHeight: '30px'
+                          }}
+                        />
+                      )}
                     </div>
                   </div>
                 </div>

From 1e5b3ffdc71c35fbbce4afc454cb66ae624ed18e Mon Sep 17 00:00:00 2001
From: Aniket-Engg <aniketengg.225@gmail.com>
Date: Tue, 19 May 2026 21:34:09 +0530
Subject: [PATCH 8/8] fix badge text position and background color

---
 .../run-tab-deploy/src/lib/widgets/deployPortraitView.tsx      | 2 +-
 .../src/lib/components/DeployedContractItem.tsx                | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx b/libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx
index 7845234b014..44f833a433d 100644
--- a/libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx
+++ b/libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx
@@ -777,7 +777,7 @@ function DeployPortraitView() {
                     tooltipText={widgetState.gasLimit === 0 ? intl.formatMessage({ id: 'udapp.gasLimitBadgeAutoTooltip', defaultMessage: 'Click to set custom gas limit' }) : intl.formatMessage({ id: 'udapp.gasLimitBadgeCustomTooltip', defaultMessage: 'Click to use auto estimated gas' })}
                   >
                     <span
-                      className="p-1 pt-0 rounded"
+                      className="p-1 rounded"
                       style={{
                         position: 'absolute',
                         left: '0.5rem',
diff --git a/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx b/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
index fc3981c4e60..b64b577eda1 100644
--- a/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
+++ b/libs/remix-ui/run-tab-deployed-contracts/src/lib/components/DeployedContractItem.tsx
@@ -1044,7 +1044,7 @@ Before generating, please ask me about my design preferences first.`
                           style={{
                             position: 'absolute',
                             left: '0.35rem',
-                            top: '50%',
+                            top: '35%',
                             transform: 'translateY(-50%)',
                             backgroundColor: '#64C4FF14',
                             color: '#64c4ff',
@@ -1081,6 +1081,7 @@ Before generating, please ask me about my design preferences first.`
                             }}
                             disabled={gasLimit === 0}
                             style={{
+                              backgroundColor: themeQuality === 'dark' ? 'var(--custom-onsurface-layer-4)' : 'var(--bs-body-bg)',
                               color: 'var(--dark/text-quaternary, #959bad)',
                               flex: 1,
                               paddingLeft: '4rem',