[PRMP-731] Fix screenspace issue with pdf-viewer at high zoom (#844)

adamwhitingnhs · kamenbachvarov-nhs · web-flow · commit 3829756b9655 · 2025-10-31T13:52:50.000Z
Co-authored-by: Kamen Bachvarov &lt;kamen.bachvaror1@nhs.net&gt;
diff --git a/app/cypress/e2e/0-ndr-core-tests/gp_user_workflows/view_lloyd_george_workflow.cy.js b/app/cypress/e2e/0-ndr-core-tests/gp_user_workflows/view_lloyd_george_workflow.cy.js
@@ -51,6 +51,21 @@ describe('GP Workflow: View Lloyd George record', () => {
         cy.getByTestId('patient-summary-date-of-birth').should('have.text', `1 January 1970`);
     };
 
+    const assertPatientInfoSmall = () => {
+        cy.getByTestId('patient-summary-full-name').should(
+            'have.text',
+            `${searchPatientPayload.familyName}, ${searchPatientPayload.givenName}`,
+        );
+        cy.getByTestId('patient-summary-small-nhs-number').should(
+            'have.text',
+            `NHS number: 900 000 0009`,
+        );
+        cy.getByTestId('patient-summary-small-date-of-birth').should(
+            'have.text',
+            `Date of birth: 1 January 1970`,
+        );
+    };
+
     const beforeEachConfiguration = (role) => {
         cy.login(role);
         cy.navigateToPatientSearchPage();
@@ -112,7 +127,7 @@ describe('GP Workflow: View Lloyd George record', () => {
                     }
 
                     // Assert
-                    assertPatientInfo();
+                    assertPatientInfoSmall();
                     cy.getByTestId('pdf-card').should('not.exist');
                     cy.getByTestId('pdf-viewer').should('be.visible');
 
diff --git a/app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.test.tsx b/app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.test.tsx
@@ -1,5 +1,5 @@
 // Imports
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createMemoryHistory } from 'history';
 import * as ReactRouter from 'react-router-dom';
@@ -65,6 +65,20 @@ const TestApp = (props: Omit<Props, 'setStage' | 'stage'>) => {
     );
 };
 
+const simulateFullscreenChange = (isFullscreen: boolean) => {
+    act(() => {
+        // Update the fullscreenElement property to simulate browser state
+        Object.defineProperty(document, 'fullscreenElement', {
+            writable: true,
+            configurable: true,
+            value: isFullscreen ? document.documentElement : null,
+        });
+        
+        // Dispatch the fullscreenchange event
+        document.dispatchEvent(new Event('fullscreenchange'));
+    });
+};
+
 const renderComponent = (propsOverride?: Partial<Props>) => {
     const props: Omit<Props, 'setStage' | 'stage'> = {
         downloadStage: DOWNLOAD_STAGE.SUCCEEDED,
@@ -89,10 +103,23 @@ describe('<LloydGeorgeViewRecordStage />', () => {
         import.meta.env.VITE_ENVIRONMENT = 'vitest';
         mockedUsePatient.mockReturnValue(mockPatientDetails);
         mockUseConfig.mockReturnValue(buildConfig());
-    });
-
-    afterEach(() => {
-        vi.clearAllMocks();
+        
+        // Mock fullscreen API
+        Object.defineProperty(document, 'fullscreenEnabled', {
+            writable: true,
+            configurable: true,
+            value: true,
+        });
+        
+        Object.defineProperty(document, 'fullscreenElement', {
+            writable: true,
+            configurable: true,
+            value: null,
+        });
+        
+        // Mock fullscreen methods
+        (document as any).exitFullscreen = vi.fn();
+        (document.documentElement as any).requestFullscreen = vi.fn();
     });
 
     describe('Rendering', () => {
@@ -135,11 +162,14 @@ describe('<LloydGeorgeViewRecordStage />', () => {
 
             await screen.findByTitle(EMBEDDED_PDF_VIEWER_TITLE);
             await userEvent.click(screen.getByText('View in full screen'));
+            
+            // Simulate the browser entering fullscreen
+            simulateFullscreenChange(true);
 
             await screen.findByText('Exit full screen');
 
             expect(screen.getByText(patientName)).toBeInTheDocument();
-            expect(screen.getByText(dob)).toBeInTheDocument();
+            expect(screen.getByText(new RegExp(dob))).toBeInTheDocument();
             expect(screen.getByText(/NHS number/)).toBeInTheDocument();
         });
 
@@ -154,7 +184,12 @@ describe('<LloydGeorgeViewRecordStage />', () => {
             renderComponent();
 
             await userEvent.click(await screen.findByText('View in full screen'));
+            // Simulate entering fullscreen
+            simulateFullscreenChange(true);
+            
             await userEvent.click(await screen.findByText('Exit full screen'));
+            // Simulate exiting fullscreen
+            simulateFullscreenChange(false);
 
             expect(screen.getByText('View in full screen')).toBeInTheDocument();
         });
@@ -223,6 +258,9 @@ describe('<LloydGeorgeViewRecordStage />', () => {
             await userEvent.click(
                 await screen.findByRole('button', { name: 'View in full screen' }),
             );
+            
+            // Simulate entering fullscreen
+            simulateFullscreenChange(true);
 
             await screen.findByText('Exit full screen');
 
diff --git a/app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.tsx b/app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.tsx
@@ -55,8 +55,7 @@ function LloydGeorgeViewRecordStage({
         } else if (document.fullscreenElement !== null) {
             document.exitFullscreen?.();
         }
-
-        setUserSession({ ...session, isFullscreen });
+        // Note: Let the fullscreen event handlers manage the session state to avoid race conditions
     };
 
     let recordLinksToShow = getUserRecordActionLinks({ role, hasRecordInStorage }).map((link) => {
@@ -88,6 +87,26 @@ function LloydGeorgeViewRecordStage({
         }
     }, [refreshRecord, resetDocState]);
 
+    // Handle fullscreen changes from browser events
+    useEffect(() => {
+        const handleFullscreenChange = () => {
+            const isCurrentlyFullscreen = document.fullscreenElement !== null;
+            // Only update if the state has actually changed to avoid unnecessary re-renders
+            if (session.isFullscreen !== isCurrentlyFullscreen) {
+                setUserSession({ 
+                    ...session, 
+                    isFullscreen: isCurrentlyFullscreen 
+                });
+            }
+        };
+
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, [session, setUserSession]);
+
     const menuClass = showMenu ? '--menu' : '--upload';
 
     return (
@@ -137,7 +156,7 @@ function LloydGeorgeViewRecordStage({
                         </>
                     )}
 
-                    <PatientSummary showDeceasedTag>
+                    <PatientSummary showDeceasedTag oneLine={session.isFullscreen}>
                         <PatientSummary.Child item={PatientInfo.FULL_NAME} />
                         <PatientSummary.Child item={PatientInfo.NHS_NUMBER} />
                         <PatientSummary.Child item={PatientInfo.BIRTH_DATE} />
@@ -151,7 +170,7 @@ function LloydGeorgeViewRecordStage({
                         />
                     )}
 
-                    {hasRecordInStorage && config.featureFlags.uploadLloydGeorgeWorkflowEnabled && (
+                    {!session.isFullscreen && hasRecordInStorage && config.featureFlags.uploadLloydGeorgeWorkflowEnabled && (
                         <>
                             <h2>Uploading files</h2>
                             <p>
diff --git a/app/src/components/generic/patientSummary/PatientSummary.tsx b/app/src/components/generic/patientSummary/PatientSummary.tsx
@@ -1,6 +1,6 @@
-import { JSX, ReactNode, createContext, useContext } from 'react';
+import { JSX, ReactNode, createContext, useContext, useMemo } from 'react';
 import usePatient from '../../../helpers/hooks/usePatient';
-import { getFormattedDateFromString } from '../../../helpers/utils/formatDate';
+import { getFormattedDate, getFormattedDateFromString } from '../../../helpers/utils/formatDate';
 import { SummaryList, Tag } from 'nhsuk-react-components';
 import type { PatientDetails } from '../../../types/generic/patientDetails';
 import { formatNhsNumber } from '../../../helpers/utils/formatNhsNumber';
@@ -15,6 +15,7 @@ import { getFormattedPatientFullName } from '../../../helpers/utils/formatPatien
 type PatientSummaryProps = {
     showDeceasedTag?: boolean;
     children?: ReactNode;
+    oneLine?: boolean;
 };
 
 // Context for sharing patient data and configuration
@@ -124,8 +125,56 @@ const Details: React.FC<{ item: PatientInfo }> = ({ item }) => {
 const PatientSummary = ({
     showDeceasedTag = false,
     children,
+    oneLine,
 }: PatientSummaryProps): JSX.Element => {
     const patientDetails = usePatient();
+    const patientDetailsContextValue = useMemo(() => ({ patientDetails }), [patientDetails]);
+
+    if (oneLine) {
+        const nameLengthLimit = 30;
+        const givenName = patientDetails?.givenName.join(' ') || '';
+        const familyName = patientDetails?.familyName || '';
+        const longname = givenName.length + familyName.length > nameLengthLimit;
+
+        return (
+            <PatientSummaryContext.Provider value={patientDetailsContextValue}>
+                <>
+                    {showDeceasedTag && patientDetails?.deceased && (
+                        <Tag color="blue" className="mb-6" data-testid="deceased-patient-tag">
+                            Deceased patient
+                        </Tag>
+                    )}
+                    <div
+                        id="patient-info"
+                        data-testid="patient-info"
+                        className="lloydgeorge_record-stage_patient-info"
+                    >
+                        <p>
+                            <span
+                                data-testid="patient-summary-full-name"
+                                className="nhsuk-u-padding-right-9 nhsuk-u-font-weight-bold"
+                            >
+                                {getFormattedPatientFullName(patientDetails)}
+                            </span>
+
+                            {longname && <br />}
+
+                            <span
+                                data-testid="patient-summary-small-nhs-number"
+                                className="nhsuk-u-padding-right-9"
+                            >
+                                NHS number: {formatNhsNumber(patientDetails!.nhsNumber)}
+                            </span>
+                            <span data-testid="patient-summary-small-date-of-birth">
+                                Date of birth:{' '}
+                                {getFormattedDate(new Date(patientDetails!.birthDate))}
+                            </span>
+                        </p>
+                    </div>
+                </>
+            </PatientSummaryContext.Provider>
+        );
+    }
 
     // If children are provided, use compound component pattern
     if (children) {
diff --git a/app/src/styles/App.scss b/app/src/styles/App.scss
@@ -826,6 +826,7 @@ $hunit: '%';
 
 #pdf-viewer {
     height: 75vh;
+    min-height: fit-content;
 
     &.upload-preview {
         height: 90vh;
