💄(frontend) fix minor bugs and enhance DocTitle and DocShareModal

- Fixed minor bugs in the frontend codebase for improved stability.
- Enhanced DocTitle component to update title display dynamically using
useEffect.
- Refactored DocShareModal to improve modal content height calculation
for better responsiveness.

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to
 - ✨(frontend) add favorite feature #515
 - ✨(frontend) many ui fixes #524
 - 💄(frontend) fix the ux of the new ui #539
+- 💄(frontend) fix minor bugs #546
 
 ## Changed
 - 💄(frontend) add filtering from left panel #475

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

@@ -1,6 +1,12 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc, keyCloakSignIn, randomName } from './common';
+import {
+  createDoc,
+  goToGridDoc,
+  keyCloakSignIn,
+  randomName,
+  verifyDocName,
+} from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -61,7 +67,7 @@ test.describe('Doc Create: Not loggued', () => {
 
     await goToGridDoc(page, { title });
 
-    await expect(page.getByRole('heading', { name: title })).toBeVisible();
+    await verifyDocName(page, title);
 
     const editor = page.locator('.ProseMirror');
     await expect(editor.getByText('This is a normal text')).toBeVisible();

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -5,7 +5,7 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -100,6 +100,10 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
     }
   };
 
+  useEffect(() => {
+    setTitleDisplay(doc.title);
+  }, [doc]);
+
   return (
     <>
       <Tooltip content={t('Rename')} placement="top">

src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModal.tsx

@@ -42,12 +42,16 @@ type Props = {
   doc: Doc;
   onClose: () => void;
 };
+
 export const DocShareModal = ({ doc, onClose }: Props) => {
   const { t } = useTranslation();
   const selectedUsersRef = useRef<HTMLDivElement>(null);
 
   const { isDesktop } = useResponsiveStore();
 
+  const modalContentHeight = isDesktop
+    ? 'min(690px, calc(100dvh - 2em - 12px - 34px))' // 100dvh - 2em - 12px  is the max cunningham modal height.  690px is the height of the content in desktop ad 34px is the height of the modal title in mobile
+    : `calc(100dvh - 34px)`;
   const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
   const [userQuery, setUserQuery] = useState('');
   const [inputValue, setInputValue] = useState('');
@@ -164,13 +168,11 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
   };
 
   const handleRef = (node: HTMLDivElement) => {
-    const contentHeight = isDesktop ? '690px' : '100dvh - 34px'; // 690px is the height of the content in desktop ad 34px is the height of the modal title in mobile
     const inputHeight = canShare ? 70 : 0;
     const marginTop = 11;
     const footerHeight = node?.clientHeight ?? 0;
     const selectedUsersHeight = selectedUsersRef.current?.clientHeight ?? 0;
-
-    const height = `calc(${contentHeight} - ${footerHeight}px - ${selectedUsersHeight}px - ${inputHeight}px - ${marginTop}px)`;
+    const height = `calc(${modalContentHeight} - ${footerHeight}px - ${selectedUsersHeight}px - ${inputHeight}px - ${marginTop}px)`;
 
     setListHeight(height);
   };
@@ -189,7 +191,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
         <ShareModalStyle />
         <Box
           aria-label={t('Share modal')}
-          $height={isDesktop ? '690px' : `calc(100dvh - 34px)`}
+          $height={modalContentHeight}
           $overflow="hidden"
           $justify="space-between"
         >