fix: hide the composition sync bar when monaco editor height is getting smaller (#5570)

Author: appletreeisyellow

src/shared/components/FluxMonacoEditor.scss

@@ -44,25 +44,29 @@
   }
 }
 
-.sync-bar {
-  z-index: 999;
-  position: absolute;
-  width: 48px;
+.flux-editor--monaco {
+  position: relative;
+  overflow: hidden;
 
-  .sync-icon {
-    color: #0098f0;
+  .sync-bar {
+    position: absolute;
+    width: 48px;
+
+    .sync-icon {
+      color: #0098f0;
+    }
   }
-}
 
-.sync-bar--on {
-  background: #0098f01a; // blue with 10% opacity
-  border-top: 1px solid #0098f0;
-  border-bottom: 1px solid #0098f0;
-}
+  .sync-bar--on {
+    background: #0098f01a; // blue with 10% opacity
+    border-top: 1px solid #0098f0;
+    border-bottom: 1px solid #0098f0;
+  }
 
-.sync-bar--off {
-  opacity: 50%;
-  background-color: $cf-grey-35;
-  border-top: 1px solid $cf-white;
-  border-bottom: 1px solid $cf-white;
+  .sync-bar--off {
+    opacity: 50%;
+    background-color: $cf-grey-35;
+    border-top: 1px solid $cf-white;
+    border-bottom: 1px solid $cf-white;
+  }
 }

src/shared/components/FluxMonacoEditor.tsx

@@ -132,9 +132,6 @@ const FluxEditorMonaco: FC<Props> = ({
 
   return (
     <ErrorBoundary>
-      <div id={ICON_SYNC_ID} className="sync-bar">
-        <Icon glyph={IconFont.Sync} className="sync-icon" />
-      </div>
       <div className={wrapperClassName} data-testid="flux-editor">
         <MonacoEditor
           language={FLUXLANGID}
@@ -158,6 +155,9 @@ const FluxEditorMonaco: FC<Props> = ({
           }}
           editorDidMount={editorDidMount}
         />
+        <div id={ICON_SYNC_ID} className="sync-bar">
+          <Icon glyph={IconFont.Sync} className="sync-icon" />
+        </div>
       </div>
     </ErrorBoundary>
   )