From 0c584c1cf20a4547de5033fac5281e29adaca8cc Mon Sep 17 00:00:00 2001
From: Brett Walker <bwalker@gitlab.com>
Date: Thu, 28 Aug 2025 12:56:51 -0500
Subject: [PATCH 1/3] Add fullscreen with toolbar for plan/rich editor

Changelog: added
---
 .../components/content_editor.vue             | 101 ++++++++------
 .../components/formatting_toolbar.vue         |  25 +++-
 .../vue_shared/components/markdown/field.vue  | 127 ++++++++++--------
 .../vue_shared/components/markdown/header.vue |  24 +++-
 app/assets/javascripts/zen_mode.js            |   4 +-
 app/assets/stylesheets/framework/zen.scss     |  52 +++++--
 .../components/formatting_toolbar_spec.js     |  51 ++++---
 .../components/markdown/header_spec.js        |   6 +-
 8 files changed, 260 insertions(+), 130 deletions(-)

diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue
index 50fce6e29b6a87..64beee4c21175e 100644
--- a/app/assets/javascripts/content_editor/components/content_editor.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor.vue
@@ -127,6 +127,7 @@ export default {
       focused: false,
       isLoading: false,
       latestMarkdown: null,
+      isShowingFullscreen: false,
     };
   },
   computed: {
@@ -200,6 +201,23 @@ export default {
 
     // Add event listener for custom resize event
     document.addEventListener('mousedown', this.handleManualResize);
+
+    this.zen = document.querySelector('.zen-backdrop');
+
+    this.observer = new MutationObserver(() => {
+      if (this.zen && this.zen.classList.contains('fullscreen')) {
+        this.isShowingFullscreen = true;
+      } else {
+        this.isShowingFullscreen = false;
+      }
+    });
+
+    if (this.zen) {
+      this.observer.observe(this.zen, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
   },
   beforeDestroy() {
     markdownEditorEventHub.$off(CONTENT_EDITOR_PASTE, this.pasteContent);
@@ -328,48 +346,51 @@ export default {
         @keydown="$emit('keydown', $event)"
       />
       <content-editor-alert />
-      <div data-testid="content-editor" :class="{ 'is-focused': focused }">
-        <formatting-toolbar
-          ref="toolbar"
-          :supports-quick-actions="supportsQuickActions"
-          :hide-attachment-button="disableAttachments"
-          :new-comment-template-paths-prop="newCommentTemplatePaths"
-          @enableMarkdownEditor="$emit('enableMarkdownEditor')"
+      <div ref="zen-backdrop" class="zen-backdrop">
+        <div data-testid="content-editor" class="content-editor" :class="{ 'is-focused': focused }">
+          <formatting-toolbar
+            ref="toolbar"
+            :supports-quick-actions="supportsQuickActions"
+            :hide-attachment-button="disableAttachments"
+            :new-comment-template-paths-prop="newCommentTemplatePaths"
+            :fullscreen="isShowingFullscreen"
+            @enableMarkdownEditor="$emit('enableMarkdownEditor')"
+          >
+            <template #header-buttons><slot name="header-buttons"></slot></template>
+          </formatting-toolbar>
+          <div v-if="showPlaceholder" class="gl-absolute gl-px-5 gl-pt-4 gl-text-disabled">
+            {{ placeholder }}
+          </div>
+          <tiptap-editor-content
+            class="md tiptap-editor-content !gl-static"
+            data-testid="content_editor_editablebox"
+            :editor="contentEditor.tiptapEditor"
+          />
+
+          <alert-bubble-menu />
+          <code-block-bubble-menu />
+          <link-bubble-menu />
+          <media-bubble-menu />
+          <reference-bubble-menu />
+          <table-bubble-menu />
+        </div>
+        <div
+          class="gl-border-t gl-flex gl-flex-row gl-items-center gl-justify-between gl-rounded-bl-base gl-rounded-br-base gl-border-default gl-px-2"
         >
-          <template #header-buttons><slot name="header-buttons"></slot></template>
-        </formatting-toolbar>
-        <div v-if="showPlaceholder" class="gl-absolute gl-px-5 gl-pt-4 gl-text-disabled">
-          {{ placeholder }}
+          <editor-mode-switcher size="small" value="richText" @switch="handleEditorModeChanged" />
+          <slot name="toolbar"></slot>
+          <gl-button
+            v-gl-tooltip
+            icon="markdown-mark"
+            :href="markdownDocsPath"
+            target="_blank"
+            category="tertiary"
+            size="small"
+            :title="__('Markdown is supported')"
+            :aria-label="__('Markdown is supported')"
+            class="!gl-px-3"
+          />
         </div>
-        <tiptap-editor-content
-          class="md !gl-static"
-          data-testid="content_editor_editablebox"
-          :editor="contentEditor.tiptapEditor"
-        />
-
-        <alert-bubble-menu />
-        <code-block-bubble-menu />
-        <link-bubble-menu />
-        <media-bubble-menu />
-        <reference-bubble-menu />
-        <table-bubble-menu />
-      </div>
-      <div
-        class="gl-border-t gl-flex gl-flex-row gl-items-center gl-justify-between gl-rounded-bl-base gl-rounded-br-base gl-border-default gl-px-2"
-      >
-        <editor-mode-switcher size="small" value="richText" @switch="handleEditorModeChanged" />
-        <slot name="toolbar"></slot>
-        <gl-button
-          v-gl-tooltip
-          icon="markdown-mark"
-          :href="markdownDocsPath"
-          target="_blank"
-          category="tertiary"
-          size="small"
-          :title="__('Markdown is supported')"
-          :aria-label="__('Markdown is supported')"
-          class="!gl-px-3"
-        />
       </div>
     </div>
   </content-editor-provider>
diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index da165935dcd260..1c0e913875a74c 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import CommentTemplatesModal from '~/vue_shared/components/markdown/comment_templates_modal.vue';
 import { __, sprintf } from '~/locale';
 import { getModifierKey } from '~/constants';
@@ -24,6 +24,9 @@ export default {
     SummarizeCodeChanges: () =>
       import('ee_component/merge_requests/components/summarize_code_changes.vue'),
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: {
     newCommentTemplatePaths: { default: () => [] },
     tiptapEditor: { default: null },
@@ -46,6 +49,11 @@ export default {
       required: false,
       default: () => [],
     },
+    fullscreen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     const modifierKey = getModifierKey();
@@ -257,6 +265,21 @@ export default {
       <header-divider />
       <summarize-code-changes />
     </div>
+    <div v-if="fullscreen" class="full-screen gl-flex gl-grow gl-justify-end">
+      <toolbar-button
+        class="js-zen-leave !gl-mr-0"
+        icon-name="minimize"
+        :label="__('Exit full screen')"
+      />
+    </div>
+    <div v-if="!fullscreen" class="full-screen gl-flex gl-grow gl-justify-end">
+      <toolbar-button
+        class="js-zen-enter !gl-mr-0"
+        icon-name="maximize"
+        :label="__('Enter full screen')"
+        tracking-property="fullScreen"
+      />
+    </div>
     <slot name="header-buttons"></slot>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 11d49244129786..85d838a92773ca 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -156,6 +156,7 @@ export default {
       previewMarkdown: false,
       suggestions: this.note.suggestions || [],
       debouncedFetchMarkdownLoading: false,
+      isShowingFullscreen: false,
     };
   },
   computed: {
@@ -281,6 +282,23 @@ export default {
       this.autocompleteDataSources,
     );
 
+    this.zen = document.querySelector('.zen-backdrop');
+
+    this.observer = new MutationObserver(() => {
+      if (this.zen && this.zen.classList.contains('fullscreen')) {
+        this.isShowingFullscreen = true;
+      } else {
+        this.isShowingFullscreen = false;
+      }
+    });
+
+    if (this.zen) {
+      this.observer.observe(this.zen, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
+
     markdownEditorEventHub.$emit(MARKDOWN_EDITOR_READY_EVENT);
   },
   beforeDestroy() {
@@ -370,38 +388,31 @@ export default {
     class="js-vue-markdown-field md-area gfm-form !gl-relative"
     :data-uploads-path="uploadsPath"
   >
-    <markdown-header
-      :editor-ai-actions="editorAiActions"
-      :preview-markdown="previewMarkdown"
-      :line-content="lineContent"
-      :can-suggest="canSuggest"
-      :enable-preview="enablePreview"
-      :show-suggest-popover="showSuggestPopover"
-      :suggestion-start-index="suggestionsStartIndex"
-      :uploads-path="uploadsPath"
-      :markdown-preview-path="markdownPreviewPath"
-      :new-comment-template-paths-prop="newCommentTemplatePaths"
-      :drawio-enabled="drawioEnabled"
-      :supports-quick-actions="supportsQuickActions"
-      data-testid="markdownHeader"
-      :restricted-tool-bar-items="restrictedToolBarItems"
-      @showPreview="showPreview"
-      @hidePreview="hidePreview"
-      @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
-    >
-      <template #header-buttons><slot name="header-buttons"></slot></template>
-    </markdown-header>
-    <div v-show="!previewMarkdown" class="md-write-holder">
-      <div class="zen-backdrop">
+    <div ref="zen-backdrop" class="zen-backdrop">
+      <markdown-header
+        :editor-ai-actions="editorAiActions"
+        :preview-markdown="previewMarkdown"
+        :line-content="lineContent"
+        :can-suggest="canSuggest"
+        :enable-preview="enablePreview"
+        :show-suggest-popover="showSuggestPopover"
+        :suggestion-start-index="suggestionsStartIndex"
+        :uploads-path="uploadsPath"
+        :markdown-preview-path="markdownPreviewPath"
+        :new-comment-template-paths-prop="newCommentTemplatePaths"
+        :drawio-enabled="drawioEnabled"
+        :supports-quick-actions="supportsQuickActions"
+        :fullscreen="isShowingFullscreen"
+        data-testid="markdownHeader"
+        :restricted-tool-bar-items="restrictedToolBarItems"
+        @showPreview="showPreview"
+        @hidePreview="hidePreview"
+        @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
+      >
+        <template #header-buttons><slot name="header-buttons"></slot></template>
+      </markdown-header>
+      <div v-show="!previewMarkdown" class="md-write-holder">
         <slot name="textarea"></slot>
-        <a
-          v-gl-tooltip.placement.left
-          class="zen-control zen-control-leave js-zen-leave gl-button btn-default-tertiary btn-icon btn-sm"
-          href="#"
-          :title="__('Exit full screen')"
-          :aria-label="__('Exit full screen')"
-          ><gl-icon variant="subtle" :size="24" name="minimize"
-        /></a>
         <markdown-toolbar
           :markdown-docs-path="markdownDocsPath"
           :can-attach-file="canAttachFile"
@@ -412,33 +423,33 @@ export default {
           <template #toolbar><slot name="toolbar"></slot></template>
         </markdown-toolbar>
       </div>
-    </div>
-    <div
-      v-show="previewMarkdown"
-      ref="markdown-preview"
-      class="js-vue-md-preview md-preview-holder gl-px-5"
-    >
-      <suggestions
-        v-if="hasSuggestion"
-        :note-html="markdownPreview"
-        :line-type="lineType"
-        :disabled="true"
-        :suggestions="suggestions"
-        :help-page-path="helpPagePath"
-      />
-      <template v-else>
-        <div v-safe-html:[$options.safeHtmlConfig]="markdownPreview" class="md"></div>
-      </template>
-    </div>
-    <div
-      v-if="referencedCommands && previewMarkdown && !markdownPreviewLoading"
-      v-safe-html:[$options.safeHtmlConfig]="referencedCommands"
-      class="referenced-commands gl-mx-2 gl-mb-2 gl-rounded-bl-base gl-rounded-br-base gl-px-4"
-      data-testid="referenced-commands"
-    ></div>
-    <div v-if="shouldShowReferencedUsers" class="referenced-users">
-      <gl-icon name="warning-solid" />
-      <span v-safe-html:[$options.safeHtmlConfig]="addMultipleToDiscussionWarning"></span>
+      <div
+        v-show="previewMarkdown"
+        ref="markdown-preview"
+        class="js-vue-md-preview md-preview-holder gl-px-5"
+      >
+        <suggestions
+          v-if="hasSuggestion"
+          :note-html="markdownPreview"
+          :line-type="lineType"
+          :disabled="true"
+          :suggestions="suggestions"
+          :help-page-path="helpPagePath"
+        />
+        <template v-else>
+          <div v-safe-html:[$options.safeHtmlConfig]="markdownPreview" class="md"></div>
+        </template>
+      </div>
+      <div
+        v-if="referencedCommands && previewMarkdown && !markdownPreviewLoading"
+        v-safe-html:[$options.safeHtmlConfig]="referencedCommands"
+        class="referenced-commands gl-mx-2 gl-mb-2 gl-rounded-bl-base gl-rounded-br-base gl-px-4"
+        data-testid="referenced-commands"
+      ></div>
+      <div v-if="shouldShowReferencedUsers" class="referenced-users">
+        <gl-icon name="warning-solid" />
+        <span v-safe-html:[$options.safeHtmlConfig]="addMultipleToDiscussionWarning"></span>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 03754d2f94f0c9..e536bc60120b0d 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -128,6 +128,11 @@ export default {
       required: false,
       default: false,
     },
+    fullscreen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     const modifierKey = getModifierKey();
@@ -804,12 +809,27 @@ export default {
           </template>
           <slot v-if="!previewMarkdown" name="header-buttons"></slot>
         </div>
-        <div v-if="!previewMarkdown" class="full-screen gl-flex gl-grow gl-justify-end">
+        <div
+          v-if="fullscreen && !previewMarkdown"
+          class="full-screen gl-flex gl-grow gl-justify-end"
+        >
+          <toolbar-button
+            v-if="!restrictedToolBarItems.includes('full-screen')"
+            class="js-zen-leave !gl-mr-0"
+            icon="minimize"
+            :button-title="__('Exit full screen')"
+            :prepend="true"
+          />
+        </div>
+        <div
+          v-if="!fullscreen && !previewMarkdown"
+          class="full-screen gl-flex gl-grow gl-justify-end"
+        >
           <toolbar-button
             v-if="!restrictedToolBarItems.includes('full-screen')"
             class="js-zen-enter !gl-mr-0"
             icon="maximize"
-            :button-title="__('Go full screen')"
+            :button-title="__('Enter full screen')"
             :prepend="true"
             tracking-property="fullScreen"
           />
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index b992cdb94ee957..aaaf8203315ccb 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -81,7 +81,7 @@ export default class ZenMode {
   exit() {
     if (this.active_textarea) {
       Mousetrap.unpause();
-      this.active_textarea.closest('.zen-backdrop').removeClass('fullscreen');
+      this.active_backdrop.removeClass('fullscreen');
       scrollToElement(this.active_textarea, { duration: 0, offset: -100 });
       this.active_textarea.attr('style', this.storedStyle);
 
@@ -93,7 +93,7 @@ export default class ZenMode {
       this.active_backdrop = null;
 
       const $dropzone = $('.div-dropzone');
-      if ($dropzone && !$dropzone.hasClass('js-invalid-dropzone')) {
+      if ($dropzone && $dropzone.length > 0 && !$dropzone.hasClass('js-invalid-dropzone')) {
         Dropzone.forElement('.div-dropzone').enable();
       }
     }
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index d0b9b51b8e1d9f..2054702cab43cf 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -13,21 +13,57 @@
       box-shadow: none;
       border-radius: 0;
       color: $black;
-      font-size: 20px;
-      line-height: 26px;
       padding: 30px;
       display: block;
       outline: none;
       resize: none;
-      height: 100vh;
-      max-height: calc(100vh - 10px);
-      max-width: 900px;
+      height: calc(100vh - 32px);
+      max-height: calc(100vh - 32px);
+      max-width: calc(100% - 30px);
       margin: 0 auto 10px;
     }
 
-    .div-dropzone {
-      textarea.note-textarea {
-        resize: none !important;
+    .md-write-holder .comment-toolbar {
+
+    }
+    .md-header-preview {
+      top: 0px;
+    }
+
+    // Content editor specific styles for fullscreen
+    .content-editor {
+      height: calc(100vh - 32px);
+      display: flex;
+      flex-direction: column;
+      margin: 0 auto;
+
+      .formatting-toolbar {
+        flex-shrink: 0;
+      }
+
+      .tiptap-editor-content {
+        flex: 1;
+        overflow-y: auto;
+
+        .ProseMirror {
+          border: 0;
+          box-shadow: none;
+          border-radius: 0;
+          color: $black;
+          outline: none;
+          min-height: calc(100vh - 200px);
+          padding: 30px;
+        }
+      }
+    }
+
+    .div-dropzone-wrapper {
+      height: calc(100vh - 32px);
+
+      .div-dropzone {
+        textarea.note-textarea {
+          resize: none !important;
+        }
       }
     }
 
diff --git a/spec/frontend/content_editor/components/formatting_toolbar_spec.js b/spec/frontend/content_editor/components/formatting_toolbar_spec.js
index 5b02998327ec97..840fe9ef9201cc 100644
--- a/spec/frontend/content_editor/components/formatting_toolbar_spec.js
+++ b/spec/frontend/content_editor/components/formatting_toolbar_spec.js
@@ -35,22 +35,23 @@ describe('content_editor/components/formatting_toolbar', () => {
   });
 
   describe.each`
-    testId               | controlProps
-    ${'text-styles'}     | ${{}}
-    ${'bold'}            | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold (Ctrl+B)', editorCommand: 'toggleBold' }}
-    ${'italic'}          | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic (Ctrl+I)', editorCommand: 'toggleItalic' }}
-    ${'strike'}          | ${{ contentType: 'strike', iconName: 'strikethrough', label: 'Strikethrough (Ctrl+Shift+X)', editorCommand: 'toggleStrike' }}
-    ${'blockquote'}      | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote', editorCommand: 'toggleBlockquote' }}
-    ${'code'}            | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode' }}
-    ${'link'}            | ${{ contentType: 'link', iconName: 'link', label: 'Insert link (Ctrl+K)', editorCommand: 'editLink' }}
-    ${'link'}            | ${{}}
-    ${'bullet-list'}     | ${{ contentType: 'bulletList', iconName: 'list-bulleted', label: 'Add a bullet list', editorCommand: 'toggleBulletList' }}
-    ${'ordered-list'}    | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }}
-    ${'task-list'}       | ${{ contentType: 'taskList', iconName: 'list-task', label: 'Add a checklist', editorCommand: 'toggleTaskList' }}
-    ${'code-suggestion'} | ${{ contentType: 'codeSuggestion', iconName: 'doc-code', label: 'Insert suggestion', editorCommand: 'insertCodeSuggestion' }}
-    ${'attachment'}      | ${{}}
-    ${'table'}           | ${{}}
-    ${'more'}            | ${{}}
+    testId                         | controlProps
+    ${'text-styles'}               | ${{}}
+    ${'bold'}                      | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold (Ctrl+B)', editorCommand: 'toggleBold' }}
+    ${'italic'}                    | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic (Ctrl+I)', editorCommand: 'toggleItalic' }}
+    ${'strike'}                    | ${{ contentType: 'strike', iconName: 'strikethrough', label: 'Strikethrough (Ctrl+Shift+X)', editorCommand: 'toggleStrike' }}
+    ${'blockquote'}                | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote', editorCommand: 'toggleBlockquote' }}
+    ${'code'}                      | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode' }}
+    ${'link'}                      | ${{ contentType: 'link', iconName: 'link', label: 'Insert link (Ctrl+K)', editorCommand: 'editLink' }}
+    ${'link'}                      | ${{}}
+    ${'bullet-list'}               | ${{ contentType: 'bulletList', iconName: 'list-bulleted', label: 'Add a bullet list', editorCommand: 'toggleBulletList' }}
+    ${'ordered-list'}              | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }}
+    ${'task-list'}                 | ${{ contentType: 'taskList', iconName: 'list-task', label: 'Add a checklist', editorCommand: 'toggleTaskList' }}
+    ${'code-suggestion'}           | ${{ contentType: 'codeSuggestion', iconName: 'doc-code', label: 'Insert suggestion', editorCommand: 'insertCodeSuggestion' }}
+    ${'attachment'}                | ${{}}
+    ${'table'}                     | ${{}}
+    ${'more'}                      | ${{}}
+    ${'content-editor-fullscreen'} | ${{}}
   `('given a $testId toolbar control', ({ testId, controlProps }) => {
     beforeEach(() => {
       buildWrapper();
@@ -181,4 +182,22 @@ describe('content_editor/components/formatting_toolbar', () => {
       expect(skipButton.classes()).toContain('gl-sr-only');
     });
   });
+  describe('fullscreen button', () => {
+    beforeEach(() => {
+      buildWrapper();
+    });
+
+    it('renders the fullscreen button', () => {
+      expect(wrapper.findByTestId('content-editor-fullscreen').exists()).toBe(true);
+    });
+
+    it('has the correct attributes for zen mode integration', () => {
+      const fullscreenButton = wrapper.findByTestId('content-editor-fullscreen');
+
+      expect(fullscreenButton.classes()).toContain('js-zen-enter');
+      expect(fullscreenButton.attributes('icon')).toBe('maximize');
+      expect(fullscreenButton.attributes('title')).toBe('Go full screen');
+      expect(fullscreenButton.attributes('aria-label')).toBe('Go full screen');
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js
index b7d4d71aead362..c8d0770b2d2eac 100644
--- a/spec/frontend/vue_shared/components/markdown/header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/header_spec.js
@@ -78,9 +78,9 @@ describe('Markdown field header component', () => {
     ${9}  | ${'Add a checklist'}              | ${'Add a checklist'}                       | ${'taskList'}
     ${10} | ${'Indent line (⌘])'}             | ${'Indent line (Ctrl+])'}                  | ${'indent'}
     ${11} | ${'Outdent line (⌘[)'}            | ${'Outdent line (Ctrl+[)'}                 | ${'outdent'}
-    ${12} | ${'Attach a file or image'}       | ${'Attach a file or image'}                | ${'upload'}
-    ${13} | ${'Go full screen'}               | ${'Go full screen'}                        | ${'fullScreen'}
-    ${14} | ${'Find and replace'}             | ${'Find and replace'}                      | ${null}
+    ${13} | ${'Attach a file or image'}       | ${'Attach a file or image'}                | ${'upload'}
+    ${14} | ${'Enter full screen'}            | ${'Enter full screen'}                     | ${'fullScreen'}
+    ${15} | ${'Find and replace'}             | ${'Find and replace'}                      | ${null}
   `('markdown header buttons', ({ i, buttonTitle, nonMacTitle, buttonType }) => {
     it('renders the buttons with the correct title', () => {
       expect(findToolbarButtons().wrappers[i].props('buttonTitle')).toBe(buttonTitle);
-- 
GitLab


From eabbf2471135615e8666713993af9ca816cefed3 Mon Sep 17 00:00:00 2001
From: Brett Walker <bwalker@gitlab.com>
Date: Mon, 8 Sep 2025 14:30:25 -0500
Subject: [PATCH 2/3] Apply suggestion

---
 .../javascripts/vue_shared/components/markdown/header.vue    | 5 +----
 locale/gitlab.pot                                            | 3 +++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index e536bc60120b0d..d254e5e779917c 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -809,10 +809,7 @@ export default {
           </template>
           <slot v-if="!previewMarkdown" name="header-buttons"></slot>
         </div>
-        <div
-          v-if="fullscreen && !previewMarkdown"
-          class="full-screen gl-flex gl-grow gl-justify-end"
-        >
+        <div v-if="!previewMarkdown" class="full-screen gl-flex gl-grow gl-justify-end">
           <toolbar-button
             v-if="!restrictedToolBarItems.includes('full-screen')"
             class="js-zen-leave !gl-mr-0"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 602843c478d8cb..f05300e2d8f9bc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26023,6 +26023,9 @@ msgstr ""
 msgid "Enter epic URL"
 msgstr ""
 
+msgid "Enter full screen"
+msgstr ""
+
 msgid "Enter group name"
 msgstr ""
 
-- 
GitLab


From b2fd4fb56f8741c4e1995babf848a2721d0c9a0b Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Thu, 18 Sep 2025 10:50:12 -0400
Subject: [PATCH 3/3] Make these changes work with paneled view

---
 .../javascripts/vue_shared/components/markdown/header.vue    | 5 ++++-
 app/assets/stylesheets/framework/application-chrome.scss     | 4 ++++
 app/assets/stylesheets/framework/zen.scss                    | 5 +----
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index d254e5e779917c..e536bc60120b0d 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -809,7 +809,10 @@ export default {
           </template>
           <slot v-if="!previewMarkdown" name="header-buttons"></slot>
         </div>
-        <div v-if="!previewMarkdown" class="full-screen gl-flex gl-grow gl-justify-end">
+        <div
+          v-if="fullscreen && !previewMarkdown"
+          class="full-screen gl-flex gl-grow gl-justify-end"
+        >
           <toolbar-button
             v-if="!restrictedToolBarItems.includes('full-screen')"
             class="js-zen-leave !gl-mr-0"
diff --git a/app/assets/stylesheets/framework/application-chrome.scss b/app/assets/stylesheets/framework/application-chrome.scss
index 42cd90d9971041..de8e46b8952389 100644
--- a/app/assets/stylesheets/framework/application-chrome.scss
+++ b/app/assets/stylesheets/framework/application-chrome.scss
@@ -538,6 +538,10 @@
     @apply gl-grow;
   }
 
+  .panel-content:has(.zen-backdrop.fullscreen) {
+    @apply gl-fixed gl-inset-0 gl-rounded-none gl-z-9999 #{!important};
+  }
+
 }
 
 /*
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 2054702cab43cf..ca03df9a381904 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -23,11 +23,8 @@
       margin: 0 auto 10px;
     }
 
-    .md-write-holder .comment-toolbar {
-
-    }
     .md-header-preview {
-      top: 0px;
+      @apply gl-top-0;
     }
 
     // Content editor specific styles for fullscreen
-- 
GitLab