From 910d49f559de2f3152b9bd2a39d050fb05a21c3c Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Wed, 31 May 2023 09:52:17 +0200
Subject: [PATCH] Fix layout behavior with Right panel open (#160)

---
 front/src/layout/AppLayout.tsx                     |  7 ++++---
 front/src/layout/containers/MainContainer.tsx      | 12 ------------
 .../src/layout/containers/WithTopBarContainer.tsx  | 14 ++++++++------
 front/src/layout/right-drawer/RightDrawer.tsx      |  1 +
 .../table/TableActionBarButtonDeleteCompanies.tsx  |  2 --
 5 files changed, 13 insertions(+), 23 deletions(-)
 delete mode 100644 front/src/layout/containers/MainContainer.tsx

diff --git a/front/src/layout/AppLayout.tsx b/front/src/layout/AppLayout.tsx
index 29a507c7b..29d246398 100644
--- a/front/src/layout/AppLayout.tsx
+++ b/front/src/layout/AppLayout.tsx
@@ -10,14 +10,15 @@ const StyledLayout = styled.div`
   width: 100vw;
   height: 100vh;
   background: ${(props) => props.theme.noisyBackground};
-  overflow: hidden;
+  position: relative;
 `;
 
+const NAVBAR_WIDTH = '236px';
+
 const MainContainer = styled.div`
   display: flex;
   flex-direction: row;
-  overflow: hidden;
-  widht: calc(100% - 220px);
+  width: calc(100% - ${NAVBAR_WIDTH});
 `;
 
 type OwnProps = {
diff --git a/front/src/layout/containers/MainContainer.tsx b/front/src/layout/containers/MainContainer.tsx
deleted file mode 100644
index 30ca40390..000000000
--- a/front/src/layout/containers/MainContainer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-import React from 'react';
-
-const StyledMainContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-`;
-
-export function MainContainer({ children }: { children: React.ReactNode }) {
-  return <StyledMainContainer>{children}</StyledMainContainer>;
-}
diff --git a/front/src/layout/containers/WithTopBarContainer.tsx b/front/src/layout/containers/WithTopBarContainer.tsx
index f3696a701..9fbbdfc2f 100644
--- a/front/src/layout/containers/WithTopBarContainer.tsx
+++ b/front/src/layout/containers/WithTopBarContainer.tsx
@@ -19,15 +19,16 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
+const TOPBAR_HEIGHT = '48px';
+
 const MainContainer = styled.div`
   display: flex;
   flex-direction: row;
-  height: 100%;
-  width: calc(100% - 16px);
-  margin-right: 8px;
-  margin-bottom: 8px;
-  gap: 8px;
-  padding: 4px;
+  width: calc(100% - ${(props) => props.theme.spacing(3)});
+  height: calc(100% - ${TOPBAR_HEIGHT} - ${(props) => props.theme.spacing(3)});
+  background: ${(props) => props.theme.noisyBackground};
+  padding-right: ${(props) => props.theme.spacing(3)};
+  padding-bottom: ${(props) => props.theme.spacing(3)};
 `;
 
 const RIGHT_DRAWER_WIDTH = '300px';
@@ -41,6 +42,7 @@ const LeftContainer = styled.div<LeftContainerProps>`
   width: calc(
     100% - ${(props) => (props.isRightDrawerOpen ? RIGHT_DRAWER_WIDTH : '0px')}
   );
+  position: relative;
 `;
 
 function FullWidthContainer({
diff --git a/front/src/layout/right-drawer/RightDrawer.tsx b/front/src/layout/right-drawer/RightDrawer.tsx
index 7a97bc5f1..31f6fb461 100644
--- a/front/src/layout/right-drawer/RightDrawer.tsx
+++ b/front/src/layout/right-drawer/RightDrawer.tsx
@@ -10,6 +10,7 @@ const StyledRightDrawer = styled.div`
   display: flex;
   flex-direction: row;
   width: 300px;
+  margin-left: ${(props) => props.theme.spacing(2)};
 `;
 
 export function RightDrawer() {
diff --git a/front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx b/front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx
index 4b4375bd4..97e102f88 100644
--- a/front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx
+++ b/front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx
@@ -4,11 +4,9 @@ import { useDeleteCompaniesMutation } from '../../../generated/graphql';
 import { selectedRowIdsState } from '../../../modules/ui/tables/states/selectedRowIdsState';
 import { useRecoilValue } from 'recoil';
 import { useResetTableRowSelection } from '../../../modules/ui/tables/hooks/useResetTableRowSelection';
-import { useTheme } from '@emotion/react';
 
 export function TableActionBarButtonDeleteCompanies() {
   const selectedRowIds = useRecoilValue(selectedRowIdsState);
-  const theme = useTheme();
 
   const resetRowSelection = useResetTableRowSelection();