my tummy hurts

src/components/relationship.jsx

@@ -5,7 +5,7 @@ export default function Relationship(props) {
   const calcPath = (x1, x2, y1, y2) => {
     let r = 16;
     const offsetX = 8;
-    const tableWidth = 220;
+    const tableWidth = 200;
     const midX = (x2 + x1 + tableWidth) / 2;
     const endX = x2 + tableWidth < x1 ? x2 + tableWidth - offsetX * 2 : x2;
 

src/components/table.jsx

@@ -93,7 +93,7 @@ export default function Table(props) {
         key={props.id}
         x={props.tableData.x}
         y={props.tableData.y}
-        width={220}
+        width={200}
         height={height}
         style={{ cursor: "move" }}
         onMouseDown={props.onMouseDown}

src/pages/editor.jsx

@@ -35,7 +35,11 @@ export default function Editor(props) {
     <div className="h-[100vh] overflow-hidden">
       <ControlPanel layout={layout} setLayout={setLayout} />
       <div
-        className={`flex h-[calc(100vh-123.93px)]`}
+        className={
+          layout.header
+            ? `flex h-[calc(100vh-123.93px)]`
+            : `flex h-[calc(100vh-51.97px)]`
+        }
         onMouseUp={() => setResize(false)}
         onMouseMove={dragHandler}
       >
@@ -56,7 +60,6 @@ export default function Editor(props) {
             />
           )}
           <Canvas
-          width={window.innerWidth-width-8}
             tables={tables}
             setTables={setTables}
             code={code}