Merge branch '20231207-clavimoniere-rich-text-format_toolbar-fix' into 'master'

Fix rich text editor format toolbar wrapping

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/139167



Merged-by: Anna Vovchenko <avovchenko@gitlab.com>
Approved-by: Marcel van Remmerden <mvanremmerden@gitlab.com>
Approved-by: Diana Zubova <dzubova@gitlab.com>
Reviewed-by: Marcel van Remmerden <mvanremmerden@gitlab.com>
Co-authored-by: Chad Lavimoniere <clavimoniere@gitlab.com>

app/assets/javascripts/content_editor/components/formatting_toolbar.vue

@@ -75,137 +75,137 @@ export default {
 </script>
 <template>
   <div
-    class="gl-w-full gl-display-flex gl-align-items-center gl-flex-wrap gl-border-b gl-border-gray-100 gl-px-3 gl-rounded-top-base gl-justify-content-space-between"
+    class="gl-w-full gl-py-3 gl-row-gap-2 gl-display-flex gl-align-items-center gl-flex-wrap gl-border-b gl-border-gray-100 gl-px-3 gl-rounded-top-base"
     data-testid="formatting-toolbar"
   >
-    <div class="gl-py-3 gl-w-full gl-display-flex gl-align-items-flex-start">
-      <div class="gl-display-flex">
-        <toolbar-text-style-dropdown
-          data-testid="text-styles"
-          @execute="trackToolbarControlExecution"
-        />
-        <header-divider />
-      </div>
-      <div v-if="codeSuggestionsEnabled" class="gl-display-flex">
-        <toolbar-button
-          v-if="codeSuggestionsEnabled"
-          data-testid="code-suggestion"
-          content-type="codeSuggestion"
-          icon-name="doc-code"
-          editor-command="insertCodeSuggestion"
-          :label="__('Insert suggestion')"
-          :show-active-state="false"
-          @execute="trackToolbarControlExecution"
-        />
-        <header-divider />
-      </div>
-      <toolbar-button
-        data-testid="bold"
-        content-type="bold"
-        icon-name="bold"
-        editor-command="toggleBold"
-        :label="i18n.bold"
-        @execute="trackToolbarControlExecution"
-      />
-      <toolbar-button
-        data-testid="italic"
-        content-type="italic"
-        icon-name="italic"
-        editor-command="toggleItalic"
-        :label="i18n.italic"
+    <div class="gl-display-flex">
+      <toolbar-text-style-dropdown
+        data-testid="text-styles"
         @execute="trackToolbarControlExecution"
       />
-      <div class="gl-display-flex">
-        <toolbar-button
-          data-testid="strike"
-          content-type="strike"
-          icon-name="strikethrough"
-          editor-command="toggleStrike"
-          :label="i18n.strike"
-          @execute="trackToolbarControlExecution"
-        />
-        <header-divider />
-      </div>
+      <header-divider />
+    </div>
+    <div v-if="codeSuggestionsEnabled" class="gl-display-flex">
       <toolbar-button
-        data-testid="blockquote"
-        content-type="blockquote"
-        icon-name="quote"
-        editor-command="toggleBlockquote"
-        :label="i18n.quote"
+        v-if="codeSuggestionsEnabled"
+        data-testid="code-suggestion"
+        content-type="codeSuggestion"
+        icon-name="doc-code"
+        editor-command="insertCodeSuggestion"
+        :label="__('Insert suggestion')"
+        :show-active-state="false"
         @execute="trackToolbarControlExecution"
       />
+      <header-divider />
+    </div>
+    <toolbar-button
+      data-testid="bold"
+      content-type="bold"
+      icon-name="bold"
+      editor-command="toggleBold"
+      :label="i18n.bold"
+      @execute="trackToolbarControlExecution"
+    />
+    <toolbar-button
+      data-testid="italic"
+      content-type="italic"
+      icon-name="italic"
+      editor-command="toggleItalic"
+      :label="i18n.italic"
+      @execute="trackToolbarControlExecution"
+    />
+    <div class="gl-display-flex">
       <toolbar-button
-        data-testid="code"
-        content-type="code"
-        icon-name="code"
-        editor-command="toggleCode"
-        :label="i18n.code"
+        data-testid="strike"
+        content-type="strike"
+        icon-name="strikethrough"
+        editor-command="toggleStrike"
+        :label="i18n.strike"
         @execute="trackToolbarControlExecution"
       />
+      <header-divider />
+    </div>
+    <toolbar-button
+      data-testid="blockquote"
+      content-type="blockquote"
+      icon-name="quote"
+      editor-command="toggleBlockquote"
+      :label="i18n.quote"
+      @execute="trackToolbarControlExecution"
+    />
+    <toolbar-button
+      data-testid="code"
+      content-type="code"
+      icon-name="code"
+      editor-command="toggleCode"
+      :label="i18n.code"
+      @execute="trackToolbarControlExecution"
+    />
+    <toolbar-button
+      data-testid="link"
+      content-type="link"
+      icon-name="link"
+      editor-command="editLink"
+      :label="i18n.link"
+      @execute="trackToolbarControlExecution"
+    />
+    <toolbar-button
+      data-testid="bullet-list"
+      content-type="bulletList"
+      icon-name="list-bulleted"
+      class="gl-display-none gl-sm-display-inline"
+      editor-command="toggleBulletList"
+      :label="i18n.bulletList"
+      @execute="trackToolbarControlExecution"
+    />
+    <toolbar-button
+      data-testid="ordered-list"
+      content-type="orderedList"
+      icon-name="list-numbered"
+      class="gl-display-none gl-sm-display-inline"
+      editor-command="toggleOrderedList"
+      :label="i18n.numberedList"
+      @execute="trackToolbarControlExecution"
+    />
+    <div class="gl-display-flex">
       <toolbar-button
-        data-testid="link"
-        content-type="link"
-        icon-name="link"
-        editor-command="editLink"
-        :label="i18n.link"
+        data-testid="task-list"
+        content-type="taskList"
+        icon-name="list-task"
+        class="gl-display-none gl-sm-display-inline"
+        editor-command="toggleTaskList"
+        :label="i18n.taskList"
         @execute="trackToolbarControlExecution"
       />
-      <toolbar-button
-        data-testid="bullet-list"
-        content-type="bulletList"
-        icon-name="list-bulleted"
-        class="gl-display-none gl-sm-display-inline"
-        editor-command="toggleBulletList"
-        :label="i18n.bulletList"
+      <div class="gl-display-none gl-sm-display-flex">
+        <header-divider />
+      </div>
+    </div>
+    <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
+    <div class="gl-display-flex">
+      <toolbar-attachment-button
+        v-if="!hideAttachmentButton"
+        data-testid="attachment"
         @execute="trackToolbarControlExecution"
       />
+      <!-- TODO Add icon and trigger functionality from here -->
       <toolbar-button
-        data-testid="ordered-list"
-        content-type="orderedList"
-        icon-name="list-numbered"
+        v-if="supportsQuickActions"
+        data-testid="quick-actions"
+        content-type="quickAction"
+        icon-name="quick-actions"
         class="gl-display-none gl-sm-display-inline"
-        editor-command="toggleOrderedList"
-        :label="i18n.numberedList"
+        editor-command="insertQuickAction"
+        :label="__('Add a quick action')"
         @execute="trackToolbarControlExecution"
       />
-      <div class="gl-display-flex">
-        <toolbar-button
-          data-testid="task-list"
-          content-type="taskList"
-          icon-name="list-task"
-          class="gl-display-none gl-sm-display-inline"
-          editor-command="toggleTaskList"
-          :label="i18n.taskList"
-          @execute="trackToolbarControlExecution"
-        />
-        <header-divider />
-      </div>
-      <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
-      <div class="gl-display-flex">
-        <toolbar-attachment-button
-          v-if="!hideAttachmentButton"
-          data-testid="attachment"
-          @execute="trackToolbarControlExecution"
-        />
-        <!-- TODO Add icon and trigger functionality from here -->
-        <toolbar-button
-          v-if="supportsQuickActions"
-          data-testid="quick-actions"
-          content-type="quickAction"
-          icon-name="quick-actions"
-          class="gl-display-none gl-sm-display-inline"
-          editor-command="insertQuickAction"
-          :label="__('Add a quick action')"
-          @execute="trackToolbarControlExecution"
-        />
-        <header-divider v-if="newCommentTemplatePath" />
-      </div>
-      <comment-templates-dropdown
-        v-if="newCommentTemplatePath"
-        :new-comment-template-path="newCommentTemplatePath"
-        @select="insertSavedReply"
-      />
-      <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" />
+      <header-divider v-if="newCommentTemplatePath" />
     </div>
+    <comment-templates-dropdown
+      v-if="newCommentTemplatePath"
+      :new-comment-template-path="newCommentTemplatePath"
+      @select="insertSavedReply"
+    />
+    <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" />
   </div>
 </template>