debuger UI

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

@@ -57,7 +57,6 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     return () => window.removeEventListener('resize', handleResize)
   }, [state.debugging, state.isActive])
 
-
   useEffect(() => {
     return unLoad()
   }, [])
@@ -351,7 +350,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       <Toaster message={state.toastMessage} />
       <div className="px-2" ref={debuggerTopRef}>
         <div>
-          <div className="mb-2 debuggerConfig custom-control custom-checkbox" title="Using Generated Sources lets you step into compiler outputs while debugging.">
+          <p className="my-2 debuggerLabel">Debugger Configuration</p>
+          <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
             <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
               setState(prevState => {
                 return { ...prevState, opt: { ...prevState.opt, debugWithGeneratedSources: checked } }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx

@@ -105,8 +105,8 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
         <CodeListView className="pb-2 flex-grow-1" registerEvent={registerEvent} />
       </div>
       <div className='d-flex flex-column pl-2' style={{ flex:1 }}>
-        <SolidityState className="pb-1" calldata={solidityState.calldata} message={solidityState.message} />     
-        <StepDetail className="pb-1" stepDetail={stepDetail} />
+        <SolidityState className="pb-1" calldata={solidityState.calldata} message={solidityState.message} />
+        <StepDetail className="pb-1 pb-2 h-100 flex-grow-1" stepDetail={stepDetail} />
       </div>
     </div>
   )