From 8d5648005fbf25cfabb5ed807790ce18805db100 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 6 Aug 2024 11:42:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(frontend)=20stop=20limit=20layout?=
 =?UTF-8?q?=20height=20to=20screen=20size?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The app was limiting the layout height to the screen size,
which was a bit annoying when the content was
bigger than the screen.
We stop doing that, and now the layout
will grow as needed.
---
 CHANGELOG.md                                               | 4 ++++
 .../apps/e2e/__tests__/app-impress/doc-grid.spec.ts        | 2 +-
 .../src/features/docs/doc-editor/components/DocEditor.tsx  | 1 -
 .../src/features/docs/doc-versioning/components/Panel.tsx  | 7 +++++--
 .../src/features/docs/docs-grid/components/DocsGrid.tsx    | 5 +----
 src/frontend/apps/impress/src/layouts/MainLayout.tsx       | 4 ++--
 6 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9288f36f..ce688142 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,10 @@ and this project adheres to
 
 - 🐛(y-webrtc) fix prob connection #147
 
+## Changed
+
+- 🎨(frontend) stop limit layout height to screen size #158
+
 ## [1.1.0] - 2024-07-15
 
 ## Added
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
index 4765d382..d7a1b4ab 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
@@ -17,7 +17,7 @@ test.describe('Documents Grid', () => {
     await expect(thead.getByText(/Created at/i)).toBeVisible();
     await expect(thead.getByText(/Updated at/i)).toBeVisible();
     await expect(thead.getByText(/Your role/i)).toBeVisible();
-    await expect(thead.getByText(/Users number/i)).toBeVisible();
+    await expect(thead.getByText(/Members/i)).toBeVisible();
 
     const row1 = datagrid.getByRole('row').nth(1).getByRole('cell');
     const docName = await row1.nth(1).textContent();
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
index e8660739..85a55911 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -54,7 +54,6 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
         $direction="row"
         $margin={{ all: 'small', top: 'none' }}
         $gap="1rem"
-        $overflow="auto"
       >
         <Card $padding="big" $css="flex:1;" $overflow="auto">
           {isVersion ? (
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/Panel.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/Panel.tsx
index a370760b..ea9f35e2 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/Panel.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/Panel.tsx
@@ -29,8 +29,11 @@ export const Panel = ({ doc }: PanelProps) => {
     <Card
       $width="100%"
       $maxWidth="20rem"
-      $position="relative"
+      $position="sticky"
+      $maxHeight="96vh"
+      $height="100%"
       $css={`
+        top: 2vh;
         transition: ${transition};
         ${
           !isOpen &&
@@ -50,7 +53,7 @@ export const Panel = ({ doc }: PanelProps) => {
             ? t('Close the document version panel')
             : t('Open the document version panel')
         }
-        $background="white"
+        $background="transparent"
         $size="h2"
         $zIndex={1}
         $css={`
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 96c5cf91..54e7dd6b 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -20,9 +20,6 @@ import { PAGE_SIZE } from '../conf';
 import { DocsGridActions } from './DocsGridActions';
 
 const DocsGridStyle = createGlobalStyle`
-  & .c__datagrid{
-    max-height: 91%;
-  }
   & .c__datagrid thead{
     position: sticky;
     top: 0;
@@ -171,7 +168,7 @@ export const DocsGrid = () => {
             },
           },
           {
-            headerName: t('Users number'),
+            headerName: t('Members'),
             id: 'users_number',
             renderCell: ({ row }) => {
               return (
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index 0942b76d..008a8cbe 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -8,12 +8,12 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
 
   return (
     <Box>
-      <Box $height="100vh">
+      <Box $minHeight="100vh">
         <Header />
         <Box $css="flex: 1;" $direction="row">
           <Box
             as="main"
-            $height={`calc(100vh - ${HEADER_HEIGHT})`}
+            $minHeight={`calc(100vh - ${HEADER_HEIGHT})`}
             $width="100%"
             $background={colorsTokens()['primary-bg']}
           >