🐛(frontend) fix clipped formatting toolbar in new comment composer

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to
 
 ### Fixed
 
+- 🐛(frontend) fix clipped formatting toolbar in new comment composer #2585
 - 🐛(frontend) refresh pins after document deletion and restoration
 - 🐛(frontend) redirect homepage to login when homepage feat is disabled #2521
 - 🐛(backend) ignore CSPs for API docs in development

src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts

@@ -205,7 +205,20 @@ test.describe('Doc Comments', () => {
     await editor.getByText('Hello').selectText();
     await page.getByRole('button', { name: 'Add comment' }).click();
 
-    await thread.getByRole('paragraph').first().fill('This is a new comment');
+    // The composer of a new thread must not clip its formatting toolbar
+    await expect(thread).toHaveCSS('overflow', 'visible');
+
+    // Write the new comment and select it to reveal the formatting toolbar
+    const newComment = thread.getByRole('paragraph').first();
+    await newComment.fill('This is a new comment');
+    await newComment.selectText();
+
+    const boldButton = thread.locator(
+      '.bn-formatting-toolbar button[data-test="bold"]',
+    );
+    await expect(boldButton).toBeVisible();
+    await boldButton.click();
+
     await thread.locator('[data-test="save"]').click();
     await expect(editor.getByText('Hello')).toHaveClass('bn-thread-mark');
 
@@ -217,6 +230,13 @@ test.describe('Doc Comments', () => {
     await editor.first().click();
     await editor.getByText('Hello').click();
 
+    // The saved comment keeps the formatting applied in the composer
+    await expect(
+      thread
+        .locator('.bn-editor[contenteditable="false"] strong')
+        .getByText('This is a new comment'),
+    ).toBeVisible();
+
     await thread.getByText('This is a new comment').first().hover();
     await thread.locator('[data-test="moreactions"]').first().click();
     await thread.getByRole('menuitem', { name: 'Delete comment' }).click();

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

@@ -255,6 +255,10 @@ export const DocsCommentsStyle = createGlobalStyle<{
         }
       }
 
+      &:has(> .bn-comment-editor + .bn-comment-actions-wrapper) {
+        overflow: visible;
+      }
+
       // Actions button send comment
       .bn-thread-composer .bn-comment-actions-wrapper,
       &:not(.selected) .bn-comment-actions-wrapper {