From 09c4524cf85211235de3a2a07cb48ecc7625c62d Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Fri, 8 Nov 2024 21:48:28 +0100
Subject: [PATCH 1/3] Make panels full screen

---
 client/components/Controllers/Table/Panel.tsx |  4 +---
 client/components/Controllers/Table/index.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/components/Controllers/Table/Panel.tsx b/client/components/Controllers/Table/Panel.tsx
index 22c93e3da..065c7e126 100644
--- a/client/components/Controllers/Table/Panel.tsx
+++ b/client/components/Controllers/Table/Panel.tsx
@@ -2,17 +2,15 @@ import ScrollBox from '../../Parts/Boxes/Scroll'
 import MetadataPanel from './Panels/Metadata'
 import ReportPanel from './Panels/Report'
 import SourcePanel from './Panels/Source'
-import { useTheme } from '@mui/material/styles'
 import * as store from '@client/store'
 
 export default function Panel() {
-  const theme = useTheme()
   const panel = store.useStore((state) => state.panel)
 
   return (
     <ScrollBox
       hidden={!panel}
-      height={theme.spacing(42)}
+      height={'100%'}
       sx={{
         borderTop: 'solid 1px #ddd',
         backgroundColor: 'white',
diff --git a/client/components/Controllers/Table/index.tsx b/client/components/Controllers/Table/index.tsx
index d365b87f4..4fb6c6e5b 100644
--- a/client/components/Controllers/Table/index.tsx
+++ b/client/components/Controllers/Table/index.tsx
@@ -17,10 +17,12 @@ export default function Table() {
       }}
     >
       <Menu />
-      <ScrollBox sx={{ flexGrow: 1, zIndex: 10 }}>
-        <Editor />
-      </ScrollBox>
-      <Panel />
+      <Box sx={{ flexGrow: 1, display: 'flex', zIndex: 10 }}>
+        <ScrollBox sx={{ flexGrow: 1 }}>
+          <Editor />
+        </ScrollBox>
+        <Panel />
+      </Box>
     </Box>
   )
 }

From 24114aab0234b3552ffd3d8926350c2bb7af8a04 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Tue, 12 Nov 2024 02:32:12 +0100
Subject: [PATCH 2/3] Apply full screen panels to all file types (text and
 file)

---
 client/components/Controllers/File/Panel.tsx |  6 ++----
 client/components/Controllers/File/index.tsx | 10 ++++++----
 client/components/Controllers/Text/Panel.tsx |  6 ++----
 client/components/Controllers/Text/index.tsx |  8 +++++---
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/components/Controllers/File/Panel.tsx b/client/components/Controllers/File/Panel.tsx
index 39b16d92d..7f5689051 100644
--- a/client/components/Controllers/File/Panel.tsx
+++ b/client/components/Controllers/File/Panel.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@mui/material/styles'
 import ScrollBox from '../../Parts/Boxes/Scroll'
 import MetadataPanel from './Panels/Metadata'
 import ReportPanel from './Panels/Report'
@@ -6,14 +5,13 @@ import SourcePanel from './Panels/Source'
 import * as store from '@client/store'
 
 export default function Layout() {
-  const theme = useTheme()
   const panel = store.useStore((state) => state.panel)
 
   return (
     <ScrollBox
       hidden={!panel}
-      height={theme.spacing(42)}
-      sx={{ borderTop: 'solid 1px #ddd' }}
+      height="100%"
+      sx={{ borderTop: 'solid 1px #ddd', position: 'absolute', backgroundColor: 'white' }}
     >
       {panel === 'metadata' && <MetadataPanel />}
       {panel === 'report' && <ReportPanel />}
diff --git a/client/components/Controllers/File/index.tsx b/client/components/Controllers/File/index.tsx
index 234fe7663..a0b2a35ed 100644
--- a/client/components/Controllers/File/index.tsx
+++ b/client/components/Controllers/File/index.tsx
@@ -17,10 +17,12 @@ export default function File() {
       }}
     >
       <Menu />
-      <ScrollBox sx={{ flexGrow: 1, zIndex: 10 }}>
-        <View />
-      </ScrollBox>
-      <Panel />
+      <Box sx={{ flexGrow: 1, display: 'flex', zIndex: 10 }}>
+        <ScrollBox sx={{ flexGrow: 1 }}>
+          <View />
+        </ScrollBox>
+        <Panel />
+      </Box>
     </Box>
   )
 }
diff --git a/client/components/Controllers/Text/Panel.tsx b/client/components/Controllers/Text/Panel.tsx
index 8f511ac23..81e83f2cd 100644
--- a/client/components/Controllers/Text/Panel.tsx
+++ b/client/components/Controllers/Text/Panel.tsx
@@ -1,18 +1,16 @@
-import { useTheme } from '@mui/material/styles'
 import ScrollBox from '../../Parts/Boxes/Scroll'
 import MetadataPanel from './Panels/Metadata'
 import ReportPanel from './Panels/Report'
 import * as store from '@client/store'
 
 export default function Layout() {
-  const theme = useTheme()
   const panel = store.useStore((state) => state.panel)
 
   return (
     <ScrollBox
       hidden={!panel}
-      height={theme.spacing(42)}
-      sx={{ borderTop: 'solid 1px #ddd' }}
+      height="100%"
+      sx={{ borderTop: 'solid 1px #ddd', position: 'absolute', backgroundColor: 'white' }}
     >
       {panel === 'metadata' && <MetadataPanel />}
       {panel === 'report' && <ReportPanel />}
diff --git a/client/components/Controllers/Text/index.tsx b/client/components/Controllers/Text/index.tsx
index 090732414..2642f97eb 100644
--- a/client/components/Controllers/Text/index.tsx
+++ b/client/components/Controllers/Text/index.tsx
@@ -16,10 +16,12 @@ export default function Text() {
       }}
     >
       <Menu />
-      <Box sx={{ flexGrow: 1, zIndex: 10 }}>
-        <Editor />
+      <Box sx={{ flexGrow: 1, display: 'flex', zIndex: 10 }}>
+        <Box sx={{ flexGrow: 1 }}>
+          <Editor />
+        </Box>
+        <Panel />
       </Box>
-      <Panel />
     </Box>
   )
 }

From 5d1a917fb6b1de2ac22f989b2935ff97f89fd982 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Tue, 12 Nov 2024 03:02:28 +0100
Subject: [PATCH 3/3] Remove loading state that causes jumps

---
 client/components/Editors/Table/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/components/Editors/Table/index.tsx b/client/components/Editors/Table/index.tsx
index ac8749287..3883a6120 100644
--- a/client/components/Editors/Table/index.tsx
+++ b/client/components/Editors/Table/index.tsx
@@ -179,6 +179,7 @@ function LoadMask(props: { visible: boolean; zIndex: number }) {
         opacity: 0.6,
         background: 'rgba(121, 134, 203, 0.25)',
         zIndex: props.zIndex,
+        position: 'absolute',
       }}
     >
       <SpinnerCard message="Loading" />