fix console panel scroll bar issue when first rendered

Signed-off-by: Kama Huang <kamahuan@amazon.com>

Author: Kama Huang

public/pages/workflow_detail/resizable_workspace.tsx

@@ -327,6 +327,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
         display: 'flex',
         flexDirection: 'column',
         overflow: 'hidden',
+        //avoid console panel scroll bar when first render
+        overflowX: 'hidden',
+        overflowY: 'hidden',
       }}
     >
       <div
@@ -480,6 +483,8 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
           maxWidth: '100%',
           marginBottom: '15px',
           paddingBottom: '5px',
+          scrollbarWidth: 'none',
+          msOverflowStyle: 'none',
         }}
       >
         <EuiPanel
@@ -491,11 +496,17 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
             borderRadius: 0,
             borderTop: 'none',
             overflowX: 'hidden',
-            overflowY: 'auto',
+            overflowY:
+              consoleErrorMessages.length > 0 || !isEmpty(ingestResponse)
+                ? 'auto'
+                : 'hidden',
             width: '100%',
             maxWidth: '100%',
             minWidth: 0,
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
           }}
+          className="console-panel-no-scroll"
         >
           <EuiFlexGroup
             alignItems="center"

public/pages/workflow_detail/tools/console/console.tsx

@@ -177,7 +177,7 @@ export function Console(props: ConsoleProps) {
                   style={{
                     maxHeight: hasIngestResponse ? '15vh' : '25vh',
                     minHeight: '100px',
-                    overflow: 'auto',
+                    overflow: hasErrors ? 'auto' : 'hidden',
                     width: '100%',
                     maxWidth: '100%',
                     minWidth: 0,
@@ -262,7 +262,7 @@ export function Console(props: ConsoleProps) {
                   style={{
                     height: hasErrors ? '12vh' : '22vh',
                     minHeight: '100px',
-                    overflow: 'auto',
+                    overflow: hasIngestResponse ? 'auto' : 'hidden',
                     width: '100%',
                     maxWidth: '100%',
                     minWidth: 0,

public/pages/workflow_detail/workflow-detail-styles.scss

@@ -8,3 +8,17 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.console-panel-no-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.console-panel-no-scroll::-webkit-scrollbar-track {
+  display: none;
+}
+
+.console-panel-no-scroll::-webkit-scrollbar-thumb {
+  display: none;
+}