[1155] Simplify the layout using flex instead of grid

Bug: #1155 Signed-off-by: Pierre-Charles David <[email protected]>
eclipse-sirius · Apr 15, 2022 · 4dc1b46 · 4dc1b46
1 parent 0154373
commit 4dc1b46
Showing 1 changed file with 14 additions and 30 deletions.
diff --git a/frontend/src/workbench/Site.tsx b/frontend/src/workbench/Site.tsx
@@ -29,16 +29,12 @@ declare module '@material-ui/core/styles' {
 
 const useSiteStyles = makeStyles((theme) => ({
   leftSite: {
-    display: 'grid',
-    gridTemplateColumns: '32px 1fr',
-    justifyItems: 'stretch',
-    alignItems: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
   },
   rightSite: {
-    display: 'grid',
-    gridTemplateColumns: '1fr 32px',
-    justifyItems: 'stretch',
-    alignItems: 'stretch',
+    display: 'flex',
+    flexDirection: 'row-reverse',
   },
   viewSelectorLeft: {
     display: 'flex',
@@ -60,10 +56,9 @@ const useSiteStyles = makeStyles((theme) => ({
     padding: theme.spacing(1),
   },
   view: {
-    display: 'grid',
-    gridTemplateRows: 'min-content 1fr',
-    justifyItems: 'stretch',
-    alignItems: 'stretch',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
     overflow: 'auto',
   },
   viewHeader: {
@@ -75,6 +70,10 @@ const useSiteStyles = makeStyles((theme) => ({
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
   },
+  viewContent: {
+    flexGrow: 1,
+    overflow: 'auto',
+  },
 }));
 
 export const Site = ({ editingContextId, selection, setSelection, readOnly, side, contributions }: SiteProps) => {
@@ -115,7 +114,7 @@ export const Site = ({ editingContextId, selection, setSelection, readOnly, side
           {icon}
           <Typography>{title}</Typography>
         </div>
-        <div data-testid={`view-${title}`}>
+        <div className={classes.viewContent} data-testid={`view-${title}`}>
           <Component
             editingContextId={editingContextId}
             selection={selection}
@@ -127,26 +126,11 @@ export const Site = ({ editingContextId, selection, setSelection, readOnly, side
     );
   }
 
-  let content = undefined;
-  if (side === 'left') {
-    content = (
-      <>
-        {viewSelector}
-        {selectedView}
-      </>
-    );
-  } else {
-    content = (
-      <>
-        {selectedView}
-        {viewSelector}
-      </>
-    );
-  }
   let classSite = side === 'left' ? classes.leftSite : classes.rightSite;
   return (
     <div className={classSite} data-testid={`site-${side}`}>
-      {content}
+      {viewSelector}
+      {selectedView}
     </div>
   );
 };