icon for jump buttons

Author: Aniket-Engg

libs/remix-ui/debugger-ui/src/lib/debug-layout/debug-layout.css

@@ -338,14 +338,22 @@
 .jump-debug-btn {
     display: flex;
     align-items: center;
-    padding: 2px 5px;
-    height: 22px;
-    font-size: 11px;
+    justify-content: center;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    font-size: 12px;
     border: none;
-    border-radius: 10px;
+    background: transparent;
+    color: var(--text-muted);
     transition: all 0.2s;
     cursor: pointer;
-    font-family: var(--bs-body-font-family);
+    border-radius: 3px;
+}
+
+.jump-debug-btn:hover {
+    color: var(--bs-info);
+    background: rgba(var(--bs-info-rgb), 0.1);
 }
 
 .debug-section .call-trace-type.transaction {

libs/remix-ui/debugger-ui/src/lib/debug-layout/debug-layout.tsx

@@ -614,63 +614,70 @@ export const DebugLayout = ({
                   </>
                 )}
               </span>
-              {/* Navigation action buttons - show for external calls and parent calls with children */}
-              {!scope.isSenderNode && (hasChildren || opcode === 'CALL' || opcode === 'DELEGATECALL' || opcode === 'STATICCALL' ||
-                opcode === 'CREATE' || opcode === 'CREATE2' || callTypeLabel === 'INTERNAL') && (
+              {/* Navigation action buttons - show for all non-sender nodes */}
+              {!scope.isSenderNode && (scope.firstStep !== undefined || scope.lastStep !== undefined) && (
                 <div className="call-trace-actions">
                   {scope.firstStep !== undefined && (
-                    <button
-                      className="btn btn-primary btn-sm jump-debug-btn fw-bold"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        if (stepManager && stepManager.jumpTo) {
-                          // Use functionEntryStep if available (skips dispatcher), otherwise use firstStep
-                          const stepToJump = scope.functionEntryStep !== undefined ? scope.functionEntryStep : scope.firstStep
-                          stepManager.jumpTo(stepToJump)
-                        }
-                      }}
-                    >
-                      Jump Into
-                    </button>
-                  )}
-                  {scope.lastStep !== undefined && (
-                    <>
+                    <CustomTooltip tooltipText="Jump Into" tooltipId={`jump-into-${scope.scopeId}`} placement="top">
                       <button
-                        className="btn btn-primary btn-sm jump-debug-btn fw-bold"
+                        className="jump-debug-btn"
                         onClick={(e) => {
                           e.stopPropagation()
                           if (stepManager && stepManager.jumpTo) {
-                            stepManager.jumpTo(scope.lastStep)
+                            // Use functionEntryStep if available (skips dispatcher), otherwise use firstStep
+                            const stepToJump = scope.functionEntryStep !== undefined ? scope.functionEntryStep : scope.firstStep
+                            stepManager.jumpTo(stepToJump)
                           }
                         }}
                       >
-                        Jump End
+                        <i className="fas fa-sign-in-alt"></i>
                       </button>
+                    </CustomTooltip>
+                  )}
+                  {scope.lastStep !== undefined && (
+                    <>
+                      <CustomTooltip tooltipText="Jump End" tooltipId={`jump-end-${scope.scopeId}`} placement="top">
+                        <button
+                          className="jump-debug-btn"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            if (stepManager && stepManager.jumpTo) {
+                              stepManager.jumpTo(scope.lastStep)
+                            }
+                          }}
+                        >
+                          <i className="fas fa-step-forward"></i>
+                        </button>
+                      </CustomTooltip>
+                      <CustomTooltip tooltipText="Jump Over" tooltipId={`jump-over-${scope.scopeId}`} placement="top">
+                        <button
+                          className="jump-debug-btn"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            if (stepManager && stepManager.jumpTo) {
+                              stepManager.jumpTo(scope.lastStep + 1)
+                            }
+                          }}
+                        >
+                          <i className="fas fa-level-down-alt"></i>
+                        </button>
+                      </CustomTooltip>
+                    </>
+                  )}
+                  {isSelected && stepManager && stepManager.jumpOut && (
+                    <CustomTooltip tooltipText="Jump Out" tooltipId={`jump-out-${scope.scopeId}`} placement="top">
                       <button
-                        className="btn btn-primary btn-sm jump-debug-btn fw-bold"
+                        className="jump-debug-btn"
                         onClick={(e) => {
                           e.stopPropagation()
-                          if (stepManager && stepManager.jumpTo) {
-                            stepManager.jumpTo(scope.lastStep + 1)
+                          if (stepManager && stepManager.jumpOut) {
+                            stepManager.jumpOut(true) // true for solidity mode
                           }
                         }}
                       >
-                        Jump Over
+                        <i className="fas fa-sign-out-alt"></i>
                       </button>
-                    </>
-                  )}
-                  {isSelected && stepManager && stepManager.jumpOut && (
-                    <button
-                      className="btn btn-primary btn-sm jump-debug-btn fw-bold"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        if (stepManager && stepManager.jumpOut) {
-                          stepManager.jumpOut(true) // true for solidity mode
-                        }
-                      }}
-                    >
-                      Jump Out
-                    </button>
+                    </CustomTooltip>
                   )}
                 </div>
               )}