Fix panel position on mobile

packages/core/src/utils/utils.ts

@@ -1504,8 +1504,3 @@ left past the initial left edge) then swap points on that axis.
 }
 
 export default Utils
-
-// const t = '1657287720324'
-// const a = Utils.lns(t)
-// const b = Utils.lns(a)
-// console.log(t, a, b, b === t)

packages/tldraw/src/Tldraw.tsx

@@ -618,7 +618,7 @@ const StyledUI = styled('div', {
   left: 0,
   height: '100%',
   width: '100%',
-  padding: '8px 8px 0 8px',
+  padding: '0',
   display: 'flex',
   alignItems: 'flex-start',
   justifyContent: 'flex-start',

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

@@ -119,7 +119,7 @@ export const StyledToolButton = styled('button', {
   color: '$text',
   fontSize: '$0',
   background: 'none',
-  margin: '0',
+  margin: 0,
   padding: '$2',
   display: 'flex',
   alignItems: 'center',
@@ -158,7 +158,9 @@ export const StyledToolButton = styled('button', {
         },
       },
       circle: {
-        padding: '$2',
+        padding: '0',
+        height: 32,
+        width: 32,
         [`& ${StyledToolButtonInner}`]: {
           border: '1px solid $panelContrast',
           borderRadius: '100%',

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

@@ -18,33 +18,29 @@ interface ToolsPanelProps {
 
 export const ToolsPanel = React.memo(function ToolsPanel({ onBlur }: ToolsPanelProps) {
   const app = useTldrawApp()
+  const side = app.useStore(dockPositionState)
   const isDebugMode = app.useStore(isDebugModeSelector)
-  const dockPosition = app.useStore(dockPositionState)
-
-  const orientation =
-    dockPosition === 'bottom' || dockPosition === 'top' ? 'horizontal' : 'vertical'
 
   return (
-    <StyledToolsPanelContainer
+    <>
-      side={dockPosition}
+      <StyledToolsPanelContainer side={side} onBlur={onBlur} bp={breakpoints} debug={isDebugMode}>
-      onBlur={onBlur}
+        <StyledCenterWrap id="TD-Tools">
-      bp={breakpoints}
+          <BackToContent />
-      debug={isDebugMode}
+          <StyledPrimaryTools
-    >
+            orientation={side === 'bottom' || side === 'top' ? 'horizontal' : 'vertical'}
-      <StyledCenterWrap id="TD-Tools" orientation={orientation}>
+          >
-        <BackToContent />
+            <ActionButton />
-        <StyledPrimaryTools orientation={orientation}>
+            <PrimaryTools />
-          <ActionButton />
+            <DeleteButton />
-          <PrimaryTools />
+          </StyledPrimaryTools>
-          <DeleteButton />
+        </StyledCenterWrap>
-        </StyledPrimaryTools>
+      </StyledToolsPanelContainer>
-      </StyledCenterWrap>
       {isDebugMode && (
         <StyledStatusWrap>
           <StatusBar />
         </StyledStatusWrap>
       )}
-    </StyledToolsPanelContainer>
+    </>
   )
 })
 
@@ -53,13 +49,13 @@ const StyledToolsPanelContainer = styled('div', {
   width: '100%',
   minWidth: 0,
   maxWidth: '100%',
-  display: 'grid',
+  height: '64px',
-  gridTemplateColumns: 'auto auto auto',
-  gridTemplateRows: 'auto auto',
-  justifyContent: 'space-between',
-  padding: '0',
   gap: '$4',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
   zIndex: 200,
+  overflow: 'hidden',
   pointerEvents: 'none',
   '& > div > *': {
     pointerEvents: 'all',
@@ -78,20 +74,19 @@ const StyledToolsPanelContainer = styled('div', {
     side: {
       top: {
         width: '100%',
-        height: 'min-content',
+        height: 64,
         left: 0,
         right: 0,
-        top: 60,
+        top: 45,
       },
-      right: { width: 'min-content', height: '100%', right: 0 },
+      right: { width: 64, height: '100%', top: 0, right: 0 },
       bottom: {
         width: '100%',
-        height: 'min-content',
         left: 0,
         right: 0,
         bottom: 0,
       },
-      left: { width: 'min-content', height: '100%', left: 10 },
+      left: { width: 64, height: '100%', left: 0 },
     },
   },
   compoundVariants: [
@@ -99,7 +94,7 @@ const StyledToolsPanelContainer = styled('div', {
       side: 'top',
       bp: 'large',
       css: {
-        top: 10,
+        top: '10px',
       },
     },
     {
@@ -113,27 +108,21 @@ const StyledToolsPanelContainer = styled('div', {
 })
 
 const StyledCenterWrap = styled('div', {
-  gridRow: 1,
-  gridColumn: 2,
   display: 'flex',
   width: 'fit-content',
+  height: 'fit-content',
   alignItems: 'center',
   justifyContent: 'center',
   flexDirection: 'column',
   gap: '$4',
-  variants: {
-    orientation: {
-      horizontal: { gridRow: 1, gridColumn: 2 },
-      vertical: { gridRow: 2, gridColumn: 1 },
-    },
-  },
 })
 
 const StyledStatusWrap = styled('div', {
-  position: 'fixed',
+  position: 'absolute',
   bottom: 0,
   left: 0,
   right: 0,
+  height: '40px',
   width: '100%',
   maxWidth: '100%',
 })
@@ -142,7 +131,8 @@ const StyledPrimaryTools = styled('div', {
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
-  gap: '$2',
+  height: 'fit-content',
+  gap: '$3',
   variants: {
     orientation: {
       horizontal: {