fixing debuger panels' UI

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

@@ -18,6 +18,6 @@
   overflow-wrap: break-word;
 }
 .debuggerPanels {
-  overflow-y: scroll; 
+  overflow-y: auto;
   height: fit-content;
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css

@@ -4,10 +4,14 @@
   }
   .name {
     font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .nameDetail {
     font-weight: bold;
     margin-left: 3px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .icon {
     margin-right: 5%;

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

@@ -53,7 +53,14 @@ export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, curren
 
   return (
     <div id='vmdebugger' className="d-flex">
-      <div className='d-flex flex-column px-2 pr-2' style={{ flex: 1 }}>
+      <div
+        className='d-flex flex-column px-2 pr-2'
+        style={{
+          flex: 1,
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }}
+      >
         <CallstackPanel className="pb-1" calldata={callStackPanel} />
         <StackPanel className="pb-1" calldata={stackPanel} />
         <MemoryPanel className="pb-1" calldata={memoryPanel} />
@@ -61,7 +68,13 @@ export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, curren
         <ReturnValuesPanel className="pb-1" dropdownName='Return Value' calldata={returnValuesPanel || {}} />
         <GlobalVariables className="pb-1" block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
       </div>
-      <div className='d-flex flex-column px-2 pl-2' style={{ flex: 1 }}>
+      <div className='d-flex flex-column px-2 pl-2'
+        style={{
+          flex: 1,
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }}
+      >
         <FullStoragesChangesPanel className="pb-1" calldata={fullStoragesChangesPanel} />
         <CalldataPanel className="pb-1" calldata={calldataPanel} />
       </div>