From 96d0343656a4381708dc66fdfcb06500f893ea13 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 22 Aug 2022 11:59:06 +0200
Subject: [PATCH] fixes dragbar handle

---
 .../remix-app/components/dragbar/dragbar.tsx  | 26 +++++++++++++------
 .../app/src/lib/remix-app/style/remix-app.css |  2 +-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
index 952ea8ee48..ba61d5bcda 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
@@ -25,16 +25,23 @@ const DragBar = (props: IRemixDragBarUi) => {
   useEffect(() => {
     initialWidth.current = props.refObject.current.clientWidth
     if (props.maximiseTrigger > 0) {
-      const width =  0.4 * window.innerWidth      
-      props.refObject.current.style.width = width + 'px'
-      setDragBarPosX(offset + width)  
+      const width = 0.4 * window.innerWidth
+      console.log(width, props.refObject.current.offsetWidth)
+      if (width > props.refObject.current.offsetWidth) {
+        props.refObject.current.style.width = width + 'px'
+        setTimeout(() => {
+          setDragBarPosX(offset + width)
+        }, 300)
+      }
     }
   }, [props.maximiseTrigger])
 
   useEffect(() => {
     if (props.maximiseTrigger > 0) {
       props.refObject.current.style.width = initialWidth.current + 'px'
-      setDragBarPosX(offset + initialWidth.current)  
+      setTimeout(() => {
+        setDragBarPosX(offset + initialWidth.current)
+      }, 300)
     }
   }, [props.resetTrigger])
 
@@ -51,19 +58,22 @@ const DragBar = (props: IRemixDragBarUi) => {
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
-  function stopDrag (e: MouseEvent, data: any) {
+  function stopDrag(e: MouseEvent, data: any) {
     setDragState(false)
     if (data.x < props.minWidth) {
       setDragBarPosX(offset)
       props.setHideStatus(true)
     } else {
       props.refObject.current.style.width = (data.x - offset) + 'px'
-      props.setHideStatus(false)
-      setDragBarPosX(offset + props.refObject.current.offsetWidth)
+      setTimeout(() => {
+        props.setHideStatus(false)
+        setDragBarPosX(offset + props.refObject.current.offsetWidth)
+      }, 300)
     }
+
   }
 
-  function startDrag () {
+  function startDrag() {
     setDragState(true)
   }
   return <>
diff --git a/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css b/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css
index f7c67ee3cb..8c321b9145 100644
--- a/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css
+++ b/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css
@@ -32,7 +32,7 @@ pre {
   display            : flex;
   flex-direction     : row-reverse;
   width              : 320px;
-  transition         : width 1s;
+  transition         : width 0.25s;
 }
 
 .highlightcode       {