🎨(frontend) stop limit layout height to screen size

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

@@ -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

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();

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 ? (

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={`

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 (

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']}
           >