diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d6685238..d47b46ae6 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts index 3a0883b04..3fbd1d081 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts +++ b/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(); diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx index 68c2682c1..37e2fdf9e 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx +++ b/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 ( <> diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModal.tsx index 3438f0db4..32b4f1966 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModal.tsx +++ b/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(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([]); 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) => {