From 53279ca197c1aa22d2101a89c8bd772b170822a4 Mon Sep 17 00:00:00 2001
From: BOUKERFA Mohamed El Amine <boukerfa.ma@gmail.com>
Date: Thu, 13 Aug 2026 14:02:56 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20clipped=20format?=
 =?UTF-8?q?ting=20toolbar=20in=20new=20comment=20composer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The new comment composer cllipped its own formatting toolbar.
That made styling text impossible so we let the toolbar extend past the box.

Signed-off-by: BOUKERFA Mohamed El Amine <boukerfa.ma@gmail.com>
---
 CHANGELOG.md                                  |  1 +
 .../app-impress/doc-comments.spec.ts          | 22 ++++++++++++++++++-
 .../src/features/docs/doc-comments/styles.tsx |  4 ++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index defbd42f84..86c138419f 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts
index a6dd7dc43a..cfe519c242 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts
+++ b/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();
diff --git a/src/frontend/apps/impress/src/features/docs/doc-comments/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-comments/styles.tsx
index 7542857132..2c8596ba41 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-comments/styles.tsx
+++ b/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 {