FIX: Correct height of toolbar (48) and formula bar (40)

webapp/src/components/formulabar.tsx

@@ -4,6 +4,7 @@ import { ChevronDown } from "lucide-react";
 import { Fx } from "../icons";
 import Editor from "./editor/editor";
 import type { WorkbookState } from "./workbookState";
+import { FORMULA_BAR_HEIGH } from "./constants";
 
 type FormulaBarProps = {
   cellAddress: string;
@@ -14,7 +15,6 @@ type FormulaBarProps = {
   onTextUpdated: () => void;
 };
 
-const formulaBarHeight = 30;
 const headerColumnWidth = 35;
 
 function FormulaBar(properties: FormulaBarProps) {
@@ -117,7 +117,7 @@ const Container = styled("div")`
   align-items: center;
   background: ${(properties): string =>
     properties.theme.palette.background.default};
-  height: ${formulaBarHeight}px;
+  height: ${FORMULA_BAR_HEIGH}px;
 `;
 
 const AddressContainer = styled("div")`

webapp/src/components/navigation/navigation.tsx

@@ -7,6 +7,7 @@ import type { WorkbookState } from "../workbookState";
 import SheetListMenu from "./menus";
 import Sheet from "./sheet";
 import type { SheetOptions } from "./types";
+import { NAVIGATION_HEIGH } from "../constants";
 
 export interface NavigationProps {
   sheets: SheetOptions[];
@@ -109,7 +110,7 @@ const Container = styled("div")`
   left: 0px;
   right: 0px;
   display: flex;
-  height: 40px;
+  height: ${NAVIGATION_HEIGH}px;
   align-items: center;
   padding-left: 12px;
   font-family: Inter;

webapp/src/components/toolbar.tsx

@@ -42,6 +42,7 @@ import {
   decreaseDecimalPlaces,
   increaseDecimalPlaces,
 } from "./formatUtil";
+import { TOOLBAR_HEIGH } from "./constants";
 
 type ToolbarProperties = {
   canUndo: boolean;
@@ -384,15 +385,14 @@ function Toolbar(properties: ToolbarProperties) {
     </ToolbarContainer>
   );
 }
-const toolbarHeight = 40;
 
 const ToolbarContainer = styled("div")`
   display: flex;
   flex-shrink: 0;
   align-items: center;
   background: ${({ theme }) => theme.palette.background.paper};
-  height: ${toolbarHeight}px;
-  line-height: ${toolbarHeight}px;
+  height: ${TOOLBAR_HEIGH}px;
+  line-height: ${TOOLBAR_HEIGH}px;
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey["300"]};
   font-family: Inter;
   border-radius: 4px 4px 0px 0px;

webapp/src/components/worksheet.tsx

@@ -10,6 +10,7 @@ import Editor from "./editor/editor";
 import type { Cell } from "./types";
 import usePointer from "./usePointer";
 import { AreaType, type WorkbookState } from "./workbookState";
+import { FORMULA_BAR_HEIGH, NAVIGATION_HEIGH, TOOLBAR_HEIGH } from "./constants";
 
 function useWindowSize() {
   const [size, setSize] = useState([0, 0]);
@@ -417,10 +418,10 @@ const SheetContainer = styled("div")`
 const Wrapper = styled("div")({
   position: "absolute",
   overflow: "scroll",
-  top: 71,
+  top: TOOLBAR_HEIGH + FORMULA_BAR_HEIGH + 1,
   left: 0,
   right: 0,
-  bottom: 41,
+  bottom: NAVIGATION_HEIGH + 1,
 });
 
 const SheetCanvas = styled("canvas")`