FIX: Better support for mobile phones

webapp/src/AppComponents/FileBar.tsx

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import type { Model } from "@ironcalc/wasm";
 import { CircleCheck } from "lucide-react";
 import { useRef, useState } from "react";
-import { IronCalcLogo } from "./../icons";
+import { IronCalcIcon, IronCalcLogo } from "./../icons";
 import { FileMenu } from "./FileMenu";
 import { ShareButton } from "./ShareButton";
 import { WorkbookTitle } from "./WorkbookTitle";
@@ -19,7 +19,8 @@ export function FileBar(properties: {
   const [toast, setToast] = useState(false);
   return (
     <FileBarWrapper>
-      <IronCalcLogo style={{ width: "120px", marginLeft: "10px" }} />
+      <StyledDesktopLogo />
+      <StyledIronCalcIcon />
       <Divider />
       <FileMenu
         newModel={properties.newModel}
@@ -77,6 +78,22 @@ export function FileBar(properties: {
   );
 }
 
+const StyledDesktopLogo = styled(IronCalcLogo)`
+  width: 120px;
+  margin-left: 10px;
+  @media (max-width: 769px) {
+    display: none;
+  }
+`;
+
+const StyledIronCalcIcon = styled(IronCalcIcon)`
+  width: 36px;
+  margin-left: 10px;
+  @media (min-width: 769px) {
+    display: none;
+  }
+`;
+
 const Toast = styled("div")`
   font-weight: 400;
   font-size: 12px;
@@ -97,7 +114,7 @@ const FileBarWrapper = styled("div")`
   background: #fff;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #E0E0E0;
+  border-bottom: 1px solid #e0e0e0;
   position: relative;
   justify-content: space-between;
 `;

webapp/src/AppComponents/FileMenu.tsx

@@ -147,7 +147,6 @@ const FileMenuWrapper = styled("div")`
   padding: 10px;
   height: 20px;
   border-radius: 4px;
-  margin: 10px;
   &:hover {
     background-color: #f2f2f2;
   }

webapp/src/components/navigation/sheet.tsx

@@ -127,7 +127,7 @@ function Sheet(props: SheetProps) {
 const StyledMenu = styled(Menu)``;
 
 const StyledMenuItem = styled(MenuItem)`
-font-size: 12px;
+  font-size: 12px;
 `;
 
 const StyledButton = styled(Button)`

webapp/src/components/toolbar.tsx

@@ -397,6 +397,7 @@ const ToolbarContainer = styled("div")`
   font-family: Inter;
   border-radius: 4px 4px 0px 0px;
   overflow-x: auto;
+  padding-left: 11px;
 `;
 
 type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };

webapp/src/icons/index.ts

@@ -21,6 +21,7 @@ import InsertRowAboveIcon from "./insert-row-above.svg?react";
 import InsertRowBelow from "./insert-row-below.svg?react";
 
 import IronCalcLogo from "./orange+black.svg?react";
+import IronCalcIcon from "./ironcalc_icon.svg?react";
 
 import Fx from "./fx.svg?react";
 
@@ -44,6 +45,7 @@ export {
   InsertColumnRightIcon,
   InsertRowAboveIcon,
   InsertRowBelow,
+  IronCalcIcon,
   IronCalcLogo,
   Fx,
 };