From b336d5a1cedac117a6a672347917bbef6ab25f22 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Tue, 3 Sep 2024 23:43:22 +0200
Subject: [PATCH 1/9] Change Button name to 'Errors report'

---
 client/components/Parts/Bars/Menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/Parts/Bars/Menu.tsx b/client/components/Parts/Bars/Menu.tsx
index 6faec1d24..6d562bdac 100644
--- a/client/components/Parts/Bars/Menu.tsx
+++ b/client/components/Parts/Bars/Menu.tsx
@@ -93,7 +93,7 @@ export function ReportButton(props: ButtonProps) {
         <IconButton
           small
           variant="text"
-          label={props.label || 'Report'}
+          label={props.label || 'Errors Report'}
           Icon={RuleIcon}
           color={props.color || props.active ? 'warning' : undefined}
           disabled={props.disabled || props.enabled}

From a8e40a454cded958bd93d93f59b8e5ae26642756 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Wed, 4 Sep 2024 00:11:06 +0200
Subject: [PATCH 2/9] Change styling of datagrid metadata bar

---
 client/components/Controllers/Table/Menu.tsx |  5 +++
 client/components/Parts/Bars/Menu.tsx        | 32 +++++++++++++++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/client/components/Controllers/Table/Menu.tsx b/client/components/Controllers/Table/Menu.tsx
index 88f1cd825..3b84fc799 100644
--- a/client/components/Controllers/Table/Menu.tsx
+++ b/client/components/Controllers/Table/Menu.tsx
@@ -13,24 +13,29 @@ export default function Menu() {
       <menu.MetadataButton
         active={panel === 'metadata'}
         onClick={() => store.togglePanel('metadata')}
+        color='OKFNCoolGray'
       />
       <menu.ReportButton
         disabled={!report || report?.valid}
         active={panel === 'report'}
         onClick={() => store.togglePanel('report')}
+        color='OKFNCoolGray'
       />
       <menu.SourceButton
         disabled={!source?.text}
         active={panel === 'source'}
         onClick={() => store.togglePanel('source')}
+        color='OKFNCoolGray'
       />
       <menu.UndoButton
         onClick={store.undoTableChange}
         disabled={!history?.changes.length}
+        color='OKFNCoolGray'
       />
       <menu.RedoButton
         onClick={store.redoTableChange}
         disabled={!undoneHistory?.changes.length}
+        color='OKFNCoolGray'
       />
     </menu.MenuBar>
   )
diff --git a/client/components/Parts/Bars/Menu.tsx b/client/components/Parts/Bars/Menu.tsx
index 6d562bdac..7af7370db 100644
--- a/client/components/Parts/Bars/Menu.tsx
+++ b/client/components/Parts/Bars/Menu.tsx
@@ -43,7 +43,7 @@ function MenuBarItems(props: React.PropsWithChildren<MenuBarProps>) {
 
 export interface ButtonProps {
   label?: string
-  color?: 'success' | 'warning' | 'error' | 'info'
+  color?: 'success' | 'warning' | 'error' | 'info' | 'OKFNCoolGray'
   active?: boolean
   enabled?: boolean
   disabled?: boolean
@@ -66,10 +66,14 @@ export function MetadataButton(props: ButtonProps) {
           variant="text"
           label={props.label || 'Metadata'}
           Icon={TuneIcon}
-          color={props.color || props.active ? 'warning' : undefined}
+          color={props.color || props.active ? 'OKFNCoolGray' : undefined}
           disabled={props.disabled || props.enabled}
           onClick={() => onClick()}
           sx={{
+            '& .MuiTypography-root': {
+              fontSize: '16px',
+              fontWeight: '600'
+            },
             '&.Mui-disabled': {
               color: props.enabled ? theme.palette.info.main : undefined,
             },
@@ -95,10 +99,14 @@ export function ReportButton(props: ButtonProps) {
           variant="text"
           label={props.label || 'Errors Report'}
           Icon={RuleIcon}
-          color={props.color || props.active ? 'warning' : undefined}
+          color={props.color || props.active ? 'OKFNCoolGray' : undefined}
           disabled={props.disabled || props.enabled}
           onClick={() => onClick()}
           sx={{
+            '& .MuiTypography-root': {
+              fontSize: '16px',
+              fontWeight: '600'
+            },
             '&.Mui-disabled': {
               color: props.enabled ? theme.palette.info.main : undefined,
             },
@@ -124,10 +132,14 @@ export function SourceButton(props: ButtonProps) {
           variant="text"
           label={props.label || 'Source'}
           Icon={CodeIcon}
-          color={props.color || props.active ? 'warning' : undefined}
+          color={props.color || props.active ? 'OKFNCoolGray' : undefined}
           disabled={props.disabled || props.enabled}
           onClick={() => onClick()}
           sx={{
+            '& .MuiTypography-root': {
+              fontSize: '16px',
+              fontWeight: '600'
+            },
             '&.Mui-disabled': {
               color: props.enabled ? theme.palette.info.main : undefined,
             },
@@ -178,6 +190,12 @@ export function UndoButton(props: ButtonProps) {
           color={props.color}
           disabled={props.disabled}
           onClick={() => onClick()}
+          sx={{
+            '& .MuiTypography-root': {
+              fontSize: '16px',
+              fontWeight: '600'
+            },
+          }}
         />
       </Box>
   )
@@ -201,6 +219,12 @@ export function RedoButton(props: ButtonProps) {
           color={props.color}
           disabled={props.disabled}
           onClick={() => onClick()}
+          sx={{
+            '& .MuiTypography-root': {
+              fontSize: '16px',
+              fontWeight: '600'
+            }
+          }}
         />
       </Box>
   )

From 8edce4a5210291bbd34f5b757ccfa5d258506de5 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Wed, 4 Sep 2024 00:49:08 +0200
Subject: [PATCH 3/9] Make style changes to datagrid

---
 client/components/Controllers/Table/Menu.tsx  | 76 ++++++++++++-------
 client/components/Controllers/Table/index.tsx |  4 +-
 client/components/Parts/Bars/Action.tsx       | 18 +++--
 client/components/Parts/Bars/Menu.tsx         |  2 +-
 4 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/client/components/Controllers/Table/Menu.tsx b/client/components/Controllers/Table/Menu.tsx
index 3b84fc799..85b66cfa4 100644
--- a/client/components/Controllers/Table/Menu.tsx
+++ b/client/components/Controllers/Table/Menu.tsx
@@ -1,5 +1,7 @@
 import * as menu from '../../Parts/Bars/Menu'
 import * as store from '@client/store'
+import Box from '@mui/material/Box'
+import * as action from '../../Parts/Bars/Action'
 
 export default function Menu() {
   const panel = store.useStore((state) => state.panel)
@@ -8,35 +10,53 @@ export default function Menu() {
   const source = store.useStore((state) => state.source)
   const undoneHistory = store.useStore((state) => state.table?.undoneHistory)
 
+  const isTableUpdated = store.useStore(store.getIsTableOrResourceUpdated)
+
   return (
-    <menu.MenuBar>
-      <menu.MetadataButton
-        active={panel === 'metadata'}
-        onClick={() => store.togglePanel('metadata')}
-        color='OKFNCoolGray'
-      />
-      <menu.ReportButton
-        disabled={!report || report?.valid}
-        active={panel === 'report'}
-        onClick={() => store.togglePanel('report')}
-        color='OKFNCoolGray'
-      />
-      <menu.SourceButton
-        disabled={!source?.text}
-        active={panel === 'source'}
-        onClick={() => store.togglePanel('source')}
-        color='OKFNCoolGray'
-      />
-      <menu.UndoButton
-        onClick={store.undoTableChange}
-        disabled={!history?.changes.length}
-        color='OKFNCoolGray'
-      />
-      <menu.RedoButton
-        onClick={store.redoTableChange}
-        disabled={!undoneHistory?.changes.length}
-        color='OKFNCoolGray'
-      />
+    <menu.MenuBar fullWidth>
+      <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          <menu.MetadataButton
+            active={panel === 'metadata'}
+            onClick={() => store.togglePanel('metadata')}
+            color="OKFNCoolGray"
+          />
+          <menu.ReportButton
+            disabled={!report || report?.valid}
+            active={panel === 'report'}
+            onClick={() => store.togglePanel('report')}
+            color="OKFNCoolGray"
+          />
+          <menu.SourceButton
+            disabled={!source?.text}
+            active={panel === 'source'}
+            onClick={() => store.togglePanel('source')}
+            color="OKFNCoolGray"
+          />
+          <menu.UndoButton
+            onClick={store.undoTableChange}
+            disabled={!history?.changes.length}
+            color="OKFNCoolGray"
+          />
+          <menu.RedoButton
+            onClick={store.redoTableChange}
+            disabled={!undoneHistory?.changes.length}
+            color="OKFNCoolGray"
+          />
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+          <action.PublishButton
+            disabled={isTableUpdated}
+            onClick={() => store.openDialog('publish')}
+          />
+          <action.SaveButton updated={isTableUpdated} onClick={store.saveTable} />
+        </Box>
+      </Box>
     </menu.MenuBar>
   )
 }
diff --git a/client/components/Controllers/Table/index.tsx b/client/components/Controllers/Table/index.tsx
index 75d8ec3bc..cc5617ec5 100644
--- a/client/components/Controllers/Table/index.tsx
+++ b/client/components/Controllers/Table/index.tsx
@@ -1,14 +1,13 @@
 import Box from '@mui/material/Box'
 import ScrollBox from '../../Parts/Boxes/Scroll'
 import { useTheme } from '@mui/material/styles'
-import Action from './Action'
 import Editor from './Editor'
 import Menu from './Menu'
 import Panel from './Panel'
 
 export default function Table() {
   const theme = useTheme()
-  const contentHeight = `calc(100vh - ${theme.spacing(8 + 8)})`
+  const contentHeight = `calc(100vh - ${theme.spacing(8)})`
 
   return (
     <Box sx={{ height: '100%', width: '100%' }}>
@@ -17,7 +16,6 @@ export default function Table() {
         <Editor />
       </ScrollBox>
       <Panel />
-      <Action />
     </Box>
   )
 }
diff --git a/client/components/Parts/Bars/Action.tsx b/client/components/Parts/Bars/Action.tsx
index 160cdab41..89e98f47b 100644
--- a/client/components/Parts/Bars/Action.tsx
+++ b/client/components/Parts/Bars/Action.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import noop from 'lodash/noop'
 import Box from '@mui/material/Box'
 import Toolbar from '@mui/material/Toolbar'
-import IosShareIcon from '@mui/icons-material/IosShare'
 import SaveAltIcon from '@mui/icons-material/SaveAlt'
 import CheckIcon from '@mui/icons-material/Check'
 import HistoryIcon from '@mui/icons-material/History'
@@ -10,6 +9,7 @@ import IconButton from '../../Parts/Buttons/Icon'
 import Columns from '../Grids/Columns'
 import LightTooltip from '../Tooltips/Light'
 import { useKeyPress } from 'ahooks'
+import ElectricBoltIcon from '@mui/icons-material/ElectricBolt'
 
 export interface ActionBarProps {}
 
@@ -50,12 +50,14 @@ export function SaveAsButton(props: ButtonProps) {
     <LightTooltip title={title}>
       <Box>
         <IconButton
-          label={props.label || 'Save As'}
+          label={props.label || 'Save Changes'}
           Icon={SaveAltIcon}
           variant="outlined"
           disabled={props.disabled}
           onClick={() => onClick()}
-          sx={{ backgroundColor: 'white' }}
+          sx={{ backgroundColor: 'white', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
+            borderColor: (theme) => theme.palette.OKFNCoolGray.main
+          } }}
         />
       </Box>
     </LightTooltip>
@@ -77,11 +79,13 @@ export function PublishButton(props: ButtonProps) {
       <Box>
         <IconButton
           label={props.label || 'Publish'}
-          Icon={IosShareIcon}
+          Icon={ElectricBoltIcon}
           variant="outlined"
           disabled={props.disabled}
           onClick={() => onClick()}
-          sx={{ backgroundColor: 'white' }}
+          sx={{ backgroundColor: 'white', textTransform: 'none', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
+            borderColor: (theme) => theme.palette.OKFNCoolGray.main
+          }  }}
         />
       </Box>
     </LightTooltip>
@@ -129,12 +133,12 @@ export function SaveButton(props: ButtonProps) {
     <LightTooltip title={title}>
       <Box>
         <IconButton
-          label={props.label || 'Save'}
+          label={props.label || 'Save changes'}
           Icon={CheckIcon}
           variant={props.updated ? 'contained' : 'outlined'}
           disabled={!props.updated}
           onClick={() => onClick()}
-          sx={{ backgroundColor: !props.updated ? 'white' : undefined }}
+          sx={{ backgroundColor: !props.updated ? 'white' : undefined, textTransform: 'none' }}
         />
       </Box>
     </LightTooltip>
diff --git a/client/components/Parts/Bars/Menu.tsx b/client/components/Parts/Bars/Menu.tsx
index 7af7370db..9b3ae2175 100644
--- a/client/components/Parts/Bars/Menu.tsx
+++ b/client/components/Parts/Bars/Menu.tsx
@@ -25,7 +25,7 @@ export function MenuBar(props: React.PropsWithChildren<MenuBarProps>) {
   return (
     <Toolbar
       disableGutters
-      sx={{ borderBottom: 'solid 1px #ddd', backgroundColor: '#fafafa', paddingX: 2 }}
+      sx={{ borderBottom: 'solid 1px #ddd', backgroundColor: '#fafafa', paddingX: 2}}
     >
       <MenuBarItems {...props} />
     </Toolbar>

From d37a2a94ab4d78c54057f415681ac00443c624f8 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Sat, 7 Sep 2024 19:25:09 +0200
Subject: [PATCH 4/9] Change red color to OKFN theme color

---
 client/components/Editors/Table/columns.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/components/Editors/Table/columns.tsx b/client/components/Editors/Table/columns.tsx
index 21a90d0c2..7783e4351 100644
--- a/client/components/Editors/Table/columns.tsx
+++ b/client/components/Editors/Table/columns.tsx
@@ -1,6 +1,7 @@
 import LightTooltip from '../../Parts/Tooltips/Light'
 import * as helpers from '../../../helpers'
 import * as types from '../../../types'
+import { useTheme } from '@mui/material/styles'
 
 // TODO: remove colors hard-coding
 // TODO: use proper InovuaDatagrid types
@@ -32,6 +33,8 @@ export function createColumns(
     },
   }
 
+  const theme = useTheme()
+
   const dataColumns = []
   for (const field of schema.fields) {
     // TODO: fix this on ther server side -- schema should not have hidden fields
@@ -50,7 +53,7 @@ export function createColumns(
       type: ['integer', 'number'].includes(field.type) ? 'number' : 'string',
       headerProps:
         field.name in errorIndex.label
-          ? { style: { color: 'white', background: 'red' } }
+          ? { style: { color: 'white', background: theme.palette.OKFNRed.main } }
           : field.name === selection?.columnName
           ? { style: { color: '#ed6c02' } }
           : undefined,

From f9c85e8a6bd2e45198506b3faac17c07426c3797 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Sat, 7 Sep 2024 19:25:31 +0200
Subject: [PATCH 5/9] Remove tooltips from action buttons

---
 client/components/Parts/Bars/Action.tsx | 107 ++++++++++--------------
 1 file changed, 45 insertions(+), 62 deletions(-)

diff --git a/client/components/Parts/Bars/Action.tsx b/client/components/Parts/Bars/Action.tsx
index 89e98f47b..2dba95c8f 100644
--- a/client/components/Parts/Bars/Action.tsx
+++ b/client/components/Parts/Bars/Action.tsx
@@ -7,7 +7,6 @@ import CheckIcon from '@mui/icons-material/Check'
 import HistoryIcon from '@mui/icons-material/History'
 import IconButton from '../../Parts/Buttons/Icon'
 import Columns from '../Grids/Columns'
-import LightTooltip from '../Tooltips/Light'
 import { useKeyPress } from 'ahooks'
 import ElectricBoltIcon from '@mui/icons-material/ElectricBolt'
 
@@ -38,8 +37,6 @@ export interface ButtonProps {
 
 export function SaveAsButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  let title = 'Save to another location [Ctrl+J]'
-  if (props.disabled) title = 'Saving to another location is not available'
   useKeyPress(['ctrl.j'], (event) => {
     event.preventDefault()
     if (!props.disabled) {
@@ -47,27 +44,23 @@ export function SaveAsButton(props: ButtonProps) {
     }
   })
   return (
-    <LightTooltip title={title}>
-      <Box>
-        <IconButton
-          label={props.label || 'Save Changes'}
-          Icon={SaveAltIcon}
-          variant="outlined"
-          disabled={props.disabled}
-          onClick={() => onClick()}
-          sx={{ backgroundColor: 'white', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
-            borderColor: (theme) => theme.palette.OKFNCoolGray.main
-          } }}
-        />
-      </Box>
-    </LightTooltip>
+    <Box>
+      <IconButton
+        label={props.label || 'Save Changes'}
+        Icon={SaveAltIcon}
+        variant="outlined"
+        disabled={props.disabled}
+        onClick={() => onClick()}
+        sx={{ backgroundColor: 'white', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
+          borderColor: (theme) => theme.palette.OKFNCoolGray.main
+        } }}
+      />
+    </Box>
   )
 }
 
 export function PublishButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  let title = 'Publish on the web [Ctrl+K]'
-  if (props.disabled) title = 'Publishing on the web is not available'
   useKeyPress(['ctrl.k'], (event) => {
     event.preventDefault()
     if (!props.disabled) {
@@ -75,27 +68,23 @@ export function PublishButton(props: ButtonProps) {
     }
   })
   return (
-    <LightTooltip title={title}>
-      <Box>
-        <IconButton
-          label={props.label || 'Publish'}
-          Icon={ElectricBoltIcon}
-          variant="outlined"
-          disabled={props.disabled}
-          onClick={() => onClick()}
-          sx={{ backgroundColor: 'white', textTransform: 'none', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
-            borderColor: (theme) => theme.palette.OKFNCoolGray.main
-          }  }}
-        />
-      </Box>
-    </LightTooltip>
+    <Box>
+      <IconButton
+        label={props.label || 'Publish'}
+        Icon={ElectricBoltIcon}
+        variant="outlined"
+        disabled={props.disabled}
+        onClick={() => onClick()}
+        sx={{ backgroundColor: 'white', textTransform: 'none', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
+          borderColor: (theme) => theme.palette.OKFNCoolGray.main
+        }  }}
+      />
+    </Box>
   )
 }
 
 export function RevertButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  let title = 'Revert the changes [Ctrl+Q]'
-  if (!props.updated) title = 'No changes to revert'
   useKeyPress(['ctrl.q'], (event) => {
     event.preventDefault()
     if (props.updated) {
@@ -103,26 +92,22 @@ export function RevertButton(props: ButtonProps) {
     }
   })
   return (
-    <LightTooltip title={title}>
-      <Box>
-        <IconButton
-          label={props.label || 'Revert'}
-          Icon={HistoryIcon}
-          color={props.updated ? 'warning' : undefined}
-          variant={props.updated ? 'contained' : 'outlined'}
-          disabled={!props.updated}
-          onClick={() => onClick()}
-          sx={{ backgroundColor: !props.updated ? 'white' : undefined }}
-        />
-      </Box>
-    </LightTooltip>
+    <Box>
+      <IconButton
+        label={props.label || 'Revert'}
+        Icon={HistoryIcon}
+        color={props.updated ? 'warning' : undefined}
+        variant={props.updated ? 'contained' : 'outlined'}
+        disabled={!props.updated}
+        onClick={() => onClick()}
+        sx={{ backgroundColor: !props.updated ? 'white' : undefined }}
+      />
+    </Box>
   )
 }
 
 export function SaveButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  let title = 'Save the changes [Ctrl+S]'
-  if (!props.updated) title = 'No changes to save'
   useKeyPress(['ctrl.s'], (event) => {
     event.preventDefault()
     if (props.updated) {
@@ -130,17 +115,15 @@ export function SaveButton(props: ButtonProps) {
     }
   })
   return (
-    <LightTooltip title={title}>
-      <Box>
-        <IconButton
-          label={props.label || 'Save changes'}
-          Icon={CheckIcon}
-          variant={props.updated ? 'contained' : 'outlined'}
-          disabled={!props.updated}
-          onClick={() => onClick()}
-          sx={{ backgroundColor: !props.updated ? 'white' : undefined, textTransform: 'none' }}
-        />
-      </Box>
-    </LightTooltip>
+    <Box>
+      <IconButton
+        label={props.label || 'Save changes'}
+        Icon={CheckIcon}
+        variant={props.updated ? 'contained' : 'outlined'}
+        disabled={!props.updated}
+        onClick={() => onClick()}
+        sx={{ backgroundColor: !props.updated ? 'white' : undefined, textTransform: 'none' }}
+      />
+    </Box>
   )
 }

From 31d6fa4247f8c60275907d0d061b5a70773c7f0a Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Sat, 7 Sep 2024 20:40:08 +0200
Subject: [PATCH 6/9] Make panel fixed to bottom of the page (kind of)

---
 client/components/Controllers/Table/Panel.tsx | 8 +++++++-
 client/components/Controllers/Table/index.tsx | 2 +-
 client/components/Parts/Boxes/Scroll.tsx      | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/components/Controllers/Table/Panel.tsx b/client/components/Controllers/Table/Panel.tsx
index 376cc31e7..8d76f0a4a 100644
--- a/client/components/Controllers/Table/Panel.tsx
+++ b/client/components/Controllers/Table/Panel.tsx
@@ -13,7 +13,13 @@ export default function Panel() {
     <ScrollBox
       hidden={!panel}
       height={theme.spacing(42)}
-      sx={{ borderTop: 'solid 1px #ddd' }}
+      sx={{
+        borderTop: 'solid 1px #ddd',
+        position: 'absolute',
+        bottom: 0,
+        backgroundColor: 'white',
+        width: '100%',
+      }}
     >
       {panel === 'metadata' && <MetadataPanel />}
       {panel === 'report' && <ReportPanel />}
diff --git a/client/components/Controllers/Table/index.tsx b/client/components/Controllers/Table/index.tsx
index cc5617ec5..60ee628d9 100644
--- a/client/components/Controllers/Table/index.tsx
+++ b/client/components/Controllers/Table/index.tsx
@@ -10,7 +10,7 @@ export default function Table() {
   const contentHeight = `calc(100vh - ${theme.spacing(8)})`
 
   return (
-    <Box sx={{ height: '100%', width: '100%' }}>
+    <Box sx={{ height: '100%', width: '100%', position: 'relative' }}>
       <Menu />
       <ScrollBox height={contentHeight}>
         <Editor />
diff --git a/client/components/Parts/Boxes/Scroll.tsx b/client/components/Parts/Boxes/Scroll.tsx
index e646763be..54e47d9de 100644
--- a/client/components/Parts/Boxes/Scroll.tsx
+++ b/client/components/Parts/Boxes/Scroll.tsx
@@ -8,7 +8,7 @@ export default function ScrollBox(props: React.PropsWithChildren<ScrollBoxProps>
   return (
     <Box
       sx={{
-        height: props.height,
+        maxHeight: props.height,
         overflow: 'auto',
         scrollbarWidth: 'thin',
         '&::-webkit-scrollbar': {

From c282336e5ee018b430f765f4766b055ea6980a30 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Sat, 7 Sep 2024 20:44:59 +0200
Subject: [PATCH 7/9] Add separation between buttons

---
 client/components/Parts/Bars/Action.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/Parts/Bars/Action.tsx b/client/components/Parts/Bars/Action.tsx
index 2dba95c8f..53ce2f68e 100644
--- a/client/components/Parts/Bars/Action.tsx
+++ b/client/components/Parts/Bars/Action.tsx
@@ -68,7 +68,7 @@ export function PublishButton(props: ButtonProps) {
     }
   })
   return (
-    <Box>
+    <Box sx={{ marginRight: '20px' }}>
       <IconButton
         label={props.label || 'Publish'}
         Icon={ElectricBoltIcon}

From 3b8562ac02202f62b0ab0a8ab80e6e9a03c5abf4 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Sun, 8 Sep 2024 17:24:14 +0200
Subject: [PATCH 8/9] Bind table resize event to table changes and not to
 window

---
 client/components/Controllers/Table/Panel.tsx |  2 --
 client/components/Controllers/Table/index.tsx | 17 +++++++++++------
 client/components/Editors/Table/index.tsx     |  9 +++++++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/client/components/Controllers/Table/Panel.tsx b/client/components/Controllers/Table/Panel.tsx
index 8d76f0a4a..22c93e3da 100644
--- a/client/components/Controllers/Table/Panel.tsx
+++ b/client/components/Controllers/Table/Panel.tsx
@@ -15,8 +15,6 @@ export default function Panel() {
       height={theme.spacing(42)}
       sx={{
         borderTop: 'solid 1px #ddd',
-        position: 'absolute',
-        bottom: 0,
         backgroundColor: 'white',
         width: '100%',
       }}
diff --git a/client/components/Controllers/Table/index.tsx b/client/components/Controllers/Table/index.tsx
index 60ee628d9..068472f79 100644
--- a/client/components/Controllers/Table/index.tsx
+++ b/client/components/Controllers/Table/index.tsx
@@ -1,18 +1,23 @@
 import Box from '@mui/material/Box'
 import ScrollBox from '../../Parts/Boxes/Scroll'
-import { useTheme } from '@mui/material/styles'
 import Editor from './Editor'
 import Menu from './Menu'
 import Panel from './Panel'
 
 export default function Table() {
-  const theme = useTheme()
-  const contentHeight = `calc(100vh - ${theme.spacing(8)})`
-
   return (
-    <Box sx={{ height: '100%', width: '100%', position: 'relative' }}>
+    <Box
+      sx={{
+        height: '100%',
+        width: '100%',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+      }}
+    >
       <Menu />
-      <ScrollBox height={contentHeight}>
+      <ScrollBox sx={{ flexGrow: 1 }}>
         <Editor />
       </ScrollBox>
       <Panel />
diff --git a/client/components/Editors/Table/index.tsx b/client/components/Editors/Table/index.tsx
index 5b29ea93b..dee589664 100644
--- a/client/components/Editors/Table/index.tsx
+++ b/client/components/Editors/Table/index.tsx
@@ -34,10 +34,15 @@ export default function TableEditor(props: TableEditorProps) {
     const debouncedHandleResize = debounce(function handleResize() {
       resizeTable()
     }, 300)
-    window.addEventListener('resize', debouncedHandleResize)
+
+    const tableElement = document.querySelector('.InovuaReactDataGrid__column-layout')
+
+    tableElement ? new ResizeObserver(debouncedHandleResize).observe(tableElement) : null
 
     return () => {
-      window.removeEventListener('resize', debouncedHandleResize)
+      tableElement
+        ? new ResizeObserver(debouncedHandleResize).observe(tableElement)
+        : null
     }
   })
 

From 4641443dc49f643864ff01abbb9d5552409a8771 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Mon, 9 Sep 2024 11:03:15 +0200
Subject: [PATCH 9/9] Update red color

---
 client/components/Editors/Table/columns.tsx |  2 +-
 client/components/Parts/Trees/File.tsx      |  2 +-
 client/themes.ts                            | 11 ++++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/components/Editors/Table/columns.tsx b/client/components/Editors/Table/columns.tsx
index 7783e4351..38d0e9d5a 100644
--- a/client/components/Editors/Table/columns.tsx
+++ b/client/components/Editors/Table/columns.tsx
@@ -53,7 +53,7 @@ export function createColumns(
       type: ['integer', 'number'].includes(field.type) ? 'number' : 'string',
       headerProps:
         field.name in errorIndex.label
-          ? { style: { color: 'white', background: theme.palette.OKFNRed.main } }
+          ? { style: { color: 'white', background: theme.palette.OKFNRed400.main } }
           : field.name === selection?.columnName
           ? { style: { color: '#ed6c02' } }
           : undefined,
diff --git a/client/components/Parts/Trees/File.tsx b/client/components/Parts/Trees/File.tsx
index c51961cf1..7e540b9f5 100644
--- a/client/components/Parts/Trees/File.tsx
+++ b/client/components/Parts/Trees/File.tsx
@@ -125,7 +125,7 @@ function TreeItemIcon(props: { nodeId: string; item: types.IFileTreeItem }) {
 
   let color = 'gray'
   if (props.item.type === 'folder') color = 'primary'
-  if (props.item.name) color = props.item.errors ? theme.palette.OKFNRed.main : theme.palette.OKFNGreenBlue.main
+  if (props.item.name) color = props.item.errors ? theme.palette.OKFNRed500.main : theme.palette.OKFNGreenBlue.main
 
   const fontWeight = 'normal'
   // When data package is enabled consider highlighting it
diff --git a/client/themes.ts b/client/themes.ts
index 19ef1f72b..10279b48b 100644
--- a/client/themes.ts
+++ b/client/themes.ts
@@ -4,7 +4,8 @@ declare module '@mui/material/styles' {
   interface CustomPalette {
     OKFNCoolGray: SimplePaletteColorOptions
     OKFNBlue: SimplePaletteColorOptions
-    OKFNRed: SimplePaletteColorOptions
+    OKFNRed400: SimplePaletteColorOptions
+    OKFNRed500: SimplePaletteColorOptions
     OKFNGreenBlue: SimplePaletteColorOptions
   }
   interface Palette extends CustomPalette {}
@@ -16,7 +17,8 @@ declare module '@mui/material/Button' {
   interface ButtonPropsColorOverrides {
     OKFNCoolGray: true
     OKFNBlue: true
-    OKFNRed: true
+    OKFNRed400: true
+    OKFNRed500: true
     OKFNGreenBlue: true
   }
 }
@@ -58,7 +60,10 @@ export const DEFAULT = createTheme({
     OKFNBlue: {
       main: '#00D1FF',
     },
-    OKFNRed: {
+    OKFNRed400: {
+      main: '#FF7170',
+    },
+    OKFNRed500: {
       main: '#FF403F',
     },
     OKFNGreenBlue: {