diff --git a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
index dd39680fed..1b31a40762 100644
--- a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@@ -392,10 +392,14 @@ export default {
 }
 
 // .component-outer {
-//   transform: translate(0);
+//   transform: none;
 // }
 
 .component-active {
   z-index: 1;
 }
+
+.fullscreen {
+  transform: translate(0);
+}
 </style>
diff --git a/core/frontend/src/views/chart/view/TitleRemark.vue b/core/frontend/src/views/chart/view/TitleRemark.vue
index 4738bd98e8..84df54fd85 100644
--- a/core/frontend/src/views/chart/view/TitleRemark.vue
+++ b/core/frontend/src/views/chart/view/TitleRemark.vue
@@ -1,13 +1,13 @@
 <template>
   <span
-    style="transform: translate(0);display: inline-block;position: relative;
+    style="display: inline-block;position: relative;
     z-index: 10;"
   >
     <el-popover
       placement="bottom"
       trigger="hover"
       width="300"
-      :append-to-body="false"
+      :append-to-body="!previewVisible"
       popper-class="remark-pop"
       :visible-arrow="false"
     >
@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'TitleRemark',
   props: {
@@ -33,6 +34,9 @@ export default {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    ...mapState(['previewVisible'])
   }
 }
 </script>
@@ -73,15 +77,3 @@ export default {
   text-align: -webkit-match-parent!important;
 }
 </style>
-<style>
-.el-popover.remark-pop{
-  padding: 0;
-  border: none;
-  margin-top: 8px!important;
-  top: 22px !important;
-  left: auto !important;
-}
-.title-is-right .el-popover.remark-pop {
-  right: 0;
-}
-</style>