🐛(frontend) fix button markdown not visible

On smaller screens, the markdown button in the
toolbar was not every time visible.
We fix this issue.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx

@@ -6,6 +6,9 @@ import {
 import { forEach, isArray } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Text } from '@/components';
 
 type Block = {
   type: string;
@@ -83,8 +86,18 @@ export function MarkdownButton() {
       mainTooltip={t('Convert Markdown')}
       onClick={handleConvertMarkdown}
       className="--docs--editor-markdown-button"
-    >
-      M
-    </Components.FormattingToolbar.Button>
+      label="M"
+      icon={
+        <Text
+          aria-hidden={true}
+          $css={css`
+            font-family: var(--c--theme--font--families--base);
+          `}
+          $weight="bold"
+        >
+          M
+        </Text>
+      }
+    />
   );
 }

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -112,6 +112,10 @@ export const cssEditor = (readonly: boolean) => css`
       .bn-block-outer:not([data-prev-depth-changed]):before {
       border-left: none;
     }
+
+    .bn-toolbar {
+      max-width: 95vw;
+    }
   }
 
   & .bn-editor {