Web-Frontend/client/src/App.jsx

import { Global, css } from "@emotion/react";
import Header from './components/layout/Header/Header.jsx';
import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
import Canvas from './components/layout/Canvas/Canvas.jsx';
import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';

function App() {
  const recipe = useRecipe({ key: "canvas" });
  const styles = recipe();

  return (
  <>
    <Global // change the background color of widget shadow when moving
      styles={css`
        .react-grid-placeholder {
          background: #c0d2e3ff !important;
          border-color: #a9b6c2ff !important;
          box-shadow: 0 0 10px #c0d2e3ff !important;
          opacity: 1 !important;
          border-radius: 5px;
        }

        .react-resizable-handle-se {
          position: sticky;
          right: 0;
          bottom: 0;
        }
      `}
    />
    <Grid css={styles}
      templateRows="1fr 11fr"
      templateColumns="1fr 20fr"
      height="100vh"
      width="100vw"
    >
      <GridItem rowSpan={1} colSpan={2}>
        <Header />
      </GridItem>
      <GridItem colSpan={1}>
        <Sidebar />
      </GridItem>
      <GridItem colSpan={1} width="100%">
        <Canvas />
      </GridItem> 
    </Grid>
    </>
  );
}

export default App