feat(#1575) - auto scroll runner output body during collection run (#1588)

packages/bruno-app/src/components/RunnerResults/index.jsx

@@ -22,13 +22,23 @@ const getRelativePath = (fullPath, pathname) => {
 
 export default function RunnerResults({ collection }) {
   const dispatch = useDispatch();
-  const listWrapperRef = useRef();
   const [selectedItem, setSelectedItem] = useState(null);
 
+  // ref for the runner output body
+  const runnerBodyRef = useRef();
+
+  const autoScrollRunnerBody = () => {
+    if (runnerBodyRef?.current) {
+      // mimicks the native terminal scroll style
+      runnerBodyRef.current.scrollTo(0, 100000);
+    }
+  };
+
   useEffect(() => {
     if (!collection.runnerResult) {
       setSelectedItem(null);
     }
+    autoScrollRunnerBody();
   }, [collection, setSelectedItem]);
 
   const collectionCopy = cloneDeep(collection);
@@ -67,11 +77,6 @@ export default function RunnerResults({ collection }) {
     })
     .filter(Boolean);
 
-  useEffect(() => {
-    if (listWrapperRef.current) {
-      listWrapperRef.current.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
-    }
-  }, [items]);
   const runCollection = () => {
     dispatch(runCollectionFolder(collection.uid, null, true));
   };
@@ -102,12 +107,11 @@ export default function RunnerResults({ collection }) {
 
   if (!items || !items.length) {
     return (
-      <StyledWrapper className="px-4">
+      <StyledWrapper className="px-4 pb-4">
         <div className="font-medium mt-6 title flex items-center">
           Runner
           <IconRun size={20} strokeWidth={1.5} className="ml-2" />
         </div>
-
         <div className="mt-6">
           You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
         </div>
@@ -124,21 +128,25 @@ export default function RunnerResults({ collection }) {
   }
 
   return (
-    <StyledWrapper ref={listWrapperRef} className="px-4 pb-4 flex flex-grow flex-col relative">
-      <div className="flex flex-row mt-6 mb-4">
-        <div className="font-medium title flex items-center">
+    <StyledWrapper className="px-4 pb-4 flex flex-grow flex-col relative">
+      <div className="flex flex-row">
+        <div className="font-medium my-6 title flex items-center">
           Runner
           <IconRun size={20} strokeWidth={1.5} className="ml-2" />
         </div>
         {runnerInfo.status !== 'ended' && runnerInfo.cancelTokenUid && (
-          <button className="btn ml-6 btn-sm btn-danger" onClick={cancelExecution}>
+          <button className="btn ml-6 my-4 btn-sm btn-danger" onClick={cancelExecution}>
             Cancel Execution
           </button>
         )}
       </div>
-      <div className="flex flex-1">
+      <div
+        className="flex flex-col overflow-y-auto"
+        ref={runnerBodyRef}
+        style={{ height: 'calc(100vh - 12rem)', maxHeight: 'calc(100vh - 12rem)' }}
+      >
         <div className="flex flex-col flex-1">
-          <div className="py-2 font-medium test-summary">
+          <div className="pb-2 font-medium test-summary">
             Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}
           </div>
           {items.map((item) => {