[fix] mobile layout (#845)

* fix buttons on ios size

* Update ToolButton.tsx

packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx

@@ -112,6 +112,8 @@ export const StyledToolButtonInner = styled('div', {
   userSelect: 'none',
   boxSizing: 'border-box',
   border: '1px solid transparent',
+  '-webkit-tap-highlight-color': 'transparent',
+  'tap-highlight-color': 'transparent',
 })
 
 export const StyledToolButton = styled('button', {
@@ -130,6 +132,8 @@ export const StyledToolButton = styled('button', {
   border: 'none',
   height: '40px',
   width: '40px',
+  '-webkit-tap-highlight-color': 'transparent',
+  'tap-highlight-color': 'transparent',
 
   [`&:disabled ${StyledToolButtonInner}`]: {
     opacity: 0.618,
@@ -184,7 +188,9 @@ export const StyledToolButton = styled('button', {
       false: {},
     },
     bp: {
-      mobile: {},
+      mobile: {
+        padding: 0,
+      },
       small: {},
     },
   },
@@ -193,8 +199,8 @@ export const StyledToolButton = styled('button', {
       variant: 'primary',
       bp: 'mobile',
       css: {
-        height: '40px',
+        height: 40,
-        width: '40px',
+        width: 36,
         [`& ${StyledToolButtonInner} > svg`]: {
           width: 16,
           height: 16,

packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx

@@ -88,13 +88,16 @@ const HelpButton = styled('button', {
   borderRadius: '100%',
   position: 'fixed',
   right: 10,
-  display: 'grid',
+  padding: 0,
-  placeItems: 'center',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   border: 'none',
   backgroundColor: 'white',
   cursor: 'pointer',
   boxShadow: '$panel',
   bottom: 10,
+  color: '$text',
   variants: {
     debug: {
       true: {},

packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx

@@ -14,6 +14,8 @@ import { ToolButtonWithTooltip } from '~components/Primitives/ToolButton'
 import { Panel } from '~components/Primitives/Panel'
 import { ShapesMenu } from './ShapesMenu'
 import { EraserIcon } from '~components/Primitives/icons'
+import { styled } from '~styles/stitches.config'
+import { breakpoints } from '~components/breakpoints'
 
 const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool
 const toolLockedSelector = (s: TDSnapshot) => s.appState.isToolLocked
@@ -59,7 +61,12 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
   const panelStyle = dockPosition === 'bottom' || dockPosition === 'top' ? 'row' : 'column'
 
   return (
-    <Panel side="center" id="TD-PrimaryTools" style={{ flexDirection: panelStyle }}>
+    <StyledPanel
+      side="center"
+      id="TD-PrimaryTools"
+      style={{ flexDirection: panelStyle }}
+      bp={breakpoints}
+    >
       <ToolButtonWithTooltip
         kbd={'1'}
         label={intl.formatMessage({ id: 'select' })}
@@ -120,6 +127,20 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
       <ToolButtonWithTooltip label="Image" onClick={uploadMedias} id="TD-PrimaryTools-Image">
         <ImageIcon />
       </ToolButtonWithTooltip>
-    </Panel>
+    </StyledPanel>
   )
 })
+
+const StyledPanel = styled(Panel, {
+  variants: {
+    bp: {
+      mobile: {
+        padding: '$0',
+        borderRadius: '$3',
+      },
+      small: {
+        padding: '$2',
+      },
+    },
+  },
+})

packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx

@@ -51,7 +51,7 @@ const StyledToolsPanelContainer = styled('div', {
   width: '100%',
   minWidth: 0,
   maxWidth: '100%',
-  height: '64px',
+  height: 64,
   gap: '$4',
   display: 'flex',
   justifyContent: 'center',
@@ -96,7 +96,7 @@ const StyledToolsPanelContainer = styled('div', {
       side: 'top',
       bp: 'large',
       css: {
-        top: '10px',
+        top: 10,
       },
     },
     {