From 6390739fd4feb0bde38fe9eb2e8bd7faf5ee3cc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Tue, 8 Oct 2024 20:17:40 +0200
Subject: [PATCH] FIX: Correct height of toolbar (48) and formula bar (40)

---
 webapp/src/components/formulabar.tsx            | 4 ++--
 webapp/src/components/navigation/navigation.tsx | 3 ++-
 webapp/src/components/toolbar.tsx               | 6 +++---
 webapp/src/components/worksheet.tsx             | 5 +++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/webapp/src/components/formulabar.tsx b/webapp/src/components/formulabar.tsx
index fa23cb1..ce05448 100644
--- a/webapp/src/components/formulabar.tsx
+++ b/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")`
diff --git a/webapp/src/components/navigation/navigation.tsx b/webapp/src/components/navigation/navigation.tsx
index 5762a33..4d14622 100644
--- a/webapp/src/components/navigation/navigation.tsx
+++ b/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;
diff --git a/webapp/src/components/toolbar.tsx b/webapp/src/components/toolbar.tsx
index eba7e36..ec25090 100644
--- a/webapp/src/components/toolbar.tsx
+++ b/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;
diff --git a/webapp/src/components/worksheet.tsx b/webapp/src/components/worksheet.tsx
index e0e6af1..261d12d 100644
--- a/webapp/src/components/worksheet.tsx
+++ b/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")`