📱(frontend) add comments for smaller device

Add comments support for mobile devices by
removing the desktop-only restriction and
ensuring the UI adapts well to smaller screens.

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to
 ### Added
 
 - ✨(helm) redirecting system #1697
+- 📱(frontend) add comments for smaller device #1737
 
 ### Fixed
 

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

@@ -153,7 +153,7 @@ test.describe('Doc Comments', () => {
     await thread.getByRole('menuitem', { name: 'Edit comment' }).click();
     const commentEditor = thread.getByText('This is a comment').first();
     await commentEditor.fill('This is an edited comment');
-    const saveBtn = thread.getByRole('button', { name: 'Save' });
+    const saveBtn = thread.locator('button[data-test="save"]').first();
     await saveBtn.click();
     await expect(saveBtn).toBeHidden();
     await expect(
@@ -163,7 +163,8 @@ test.describe('Doc Comments', () => {
 
     // Add second comment
     await thread.getByRole('paragraph').last().fill('This is a second comment');
-    await thread.getByRole('button', { name: 'Save' }).click();
+    await saveBtn.click();
+    await expect(saveBtn).toBeHidden();
     await expect(
       thread.getByText('This is an edited comment').first(),
     ).toBeVisible();
@@ -371,7 +372,7 @@ test.describe('Doc Comments', () => {
 test.describe('Doc Comments mobile', () => {
   test.use({ viewport: { width: 500, height: 1200 } });
 
-  test('Comments are not visible on mobile', async ({ page, browserName }) => {
+  test('Can comments on mobile', async ({ page, browserName }) => {
     const [title] = await createDoc(
       page,
       'comment-mobile',
@@ -387,7 +388,16 @@ test.describe('Doc Comments mobile', () => {
     // Checks add react reaction
     const editor = await writeInEditor({ page, text: 'Hello' });
     await editor.getByText('Hello').selectText();
-    await expect(page.getByRole('button', { name: 'Comment' })).toBeHidden();
-    await expect(page.getByRole('button', { name: 'Paragraph' })).toBeVisible();
+    await page.getByRole('button', { name: 'Comment' }).click();
+
+    const thread = page.locator('.bn-thread');
+    await thread.getByRole('paragraph').first().fill('This is a comment');
+    await thread.locator('[data-test="save"]').click();
+    await expect(thread.getByText('This is a comment').first()).toBeHidden();
+
+    await editor.first().click();
+    await editor.getByText('Hello').click();
+
+    await expect(thread.getByText('This is a comment').first()).toBeVisible();
   });
 });

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

@@ -23,7 +23,6 @@ import { Box, TextErrors } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { Doc, useProviderStore } from '@/docs/doc-management';
 import { avatarUrlFromName, useAuth } from '@/features/auth';
-import { useResponsiveStore } from '@/stores';
 
 import {
   useHeadings,
@@ -86,12 +85,11 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const { setEditor } = useEditorStore();
   const { t } = useTranslation();
   const { themeTokens } = useCunninghamTheme();
-  const { isDesktop } = useResponsiveStore();
   const { isSynced: isConnectedToCollabServer } = useProviderStore();
   const refEditorContainer = useRef<HTMLDivElement>(null);
   const canSeeComment = doc.abilities.comment;
   // Determine if comments should be visible in the UI
-  const showComments = canSeeComment && isDesktop;
+  const showComments = canSeeComment;
 
   useSaveDoc(doc.id, provider.document, isConnectedToCollabServer);
   const { i18n } = useTranslation();

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx

@@ -18,7 +18,6 @@ import { css } from 'styled-components';
 import { Box, Icon } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useDocStore } from '@/features/docs/doc-management';
-import { useResponsiveStore } from '@/stores';
 
 import {
   DocsBlockSchema,
@@ -31,7 +30,6 @@ export const CommentToolbarButton = () => {
   const { currentDoc } = useDocStore();
   const { t } = useTranslation();
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
-  const { isDesktop } = useResponsiveStore();
   const comments = useExtension('comments') as unknown as ReturnType<
     ReturnType<typeof CommentsExtension>
   >;
@@ -61,7 +59,6 @@ export const CommentToolbarButton = () => {
 
   if (
     !comments ||
-    !isDesktop ||
     !show ||
     !editor.isEditable ||
     !Components ||

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

@@ -26,13 +26,16 @@ export const cssComments = (
 
     // Thread modal
     .bn-thread {
-      width: 400px;
+      width: 100%;
+      min-width: calc(min(400px, 90vw));
+      max-width: calc(min(400px, 90vw));
+      max-height: calc(min(500px, 60vh));
       padding: 8px;
       box-shadow: 0px 6px 18px 0px #00001229;
       margin-left: 20px;
+      margin-right: 20px;
       gap: 0;
       overflow: auto;
-      max-height: 500px;
 
       .bn-default-styles {
         font-family: var(--c--globals--font--families--base);