Hide toolbar in markdown preview mode

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -72,7 +72,8 @@
           Preview
         </a>
       </li>
-      <li class="md-header-toolbar">
+      <li class="md-header-toolbar"
+        :class="{ active: !previewMarkdown }">
         <toolbar-button
           tag="**"
           button-title="Add bold text"

app/assets/stylesheets/framework/markdown_area.scss

@@ -82,19 +82,27 @@
   }
 }
 
-.md-header-toolbar {
-  margin-left: auto;
+.nav-links {
+  li.md-header-toolbar {
+    margin-left: auto;
+    display: none;
 
-  @media(max-width: $screen-xs-max) {
-    flex: none;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    padding-top: $gl-padding-top;
-    padding-bottom: $gl-padding-top;
+    &.active {
+      display: block;
+    }
+
+    @media(max-width: $screen-xs-max) {
+      flex: none;
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      padding-top: $gl-padding-top;
+      padding-bottom: $gl-padding-top;
+    }
   }
 }
 
+
 .referenced-users {
   color: $gl-text-color;
   padding-top: 10px;

app/controllers/concerns/with_performance_bar.rb

@@ -6,7 +6,7 @@ module WithPerformanceBar
   end
 
   def peek_enabled?
-    return true if Rails.env.development?
+    # return true if Rails.env.development?
     return false unless Gitlab::PerformanceBar.enabled?(current_user)
 
     if RequestStore.active?

changelogs/unreleased/40063-markdown-editor-improvements.yml

+---
+title: Hide markdown toolbar in preview mode
+merge_request:
+author:
+type: changed