Merge branch '344429-fix-markdown-header-toolbar-showing-in-compact-view' into 'master'

Fix markdown header toolbar showing in compact preview view

See merge request gitlab-org/gitlab!83244

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

@@ -187,7 +187,7 @@ export default {
       <template #tabs-end>
         <div
           data-testid="md-header-toolbar"
-          :class="{ 'gl-display-none': previewMarkdown }"
+          :class="{ 'gl-display-none!': previewMarkdown }"
           class="md-header-toolbar gl-ml-auto gl-pb-3 gl-justify-content-center"
         >
           <toolbar-button

app/assets/stylesheets/framework/markdown_area.scss

@@ -72,7 +72,6 @@
     @include media-breakpoint-down(xs) {
       .nav-item {
         flex: 1;
-        border-bottom: 1px solid $border-color;
       }
 
       .gl-tab-nav-item {
@@ -84,7 +83,8 @@
         width: 100%;
         display: flex;
         flex-wrap: wrap;
-        margin-top: $gl-padding-8;
+        padding-top: $gl-padding-8;
+        border-top: 1px solid $border-color;
       }
     }
   }

spec/frontend/vue_shared/components/markdown/header_spec.js

@@ -95,7 +95,7 @@ describe('Markdown field header component', () => {
   it('hides toolbar in preview mode', () => {
     createWrapper({ previewMarkdown: true });
 
-    expect(findToolbar().classes().includes('gl-display-none')).toBe(true);
+    expect(findToolbar().classes().includes('gl-display-none!')).toBe(true);
   });
 
   it('emits toggle markdown event when clicking preview tab', async () => {