Improves bounds corner touch targets on mobile

components/canvas/bounds/bounding-box.tsx

@@ -28,7 +28,7 @@ export default function Bounds() {
   if (!bounds) return null
   if (!isSelecting) return null
 
-  const size = (isMobile().any ? 12 : 8) / zoom // Touch target size
+  const size = (isMobile().any ? 10 : 8) / zoom // Touch target size
 
   return (
     <g

components/canvas/bounds/corner-handle.tsx

@@ -1,6 +1,6 @@
-import useHandleEvents from "hooks/useBoundsHandleEvents"
-import styled from "styles"
-import { Corner, Bounds } from "types"
+import useHandleEvents from 'hooks/useBoundsHandleEvents'
+import styled from 'styles'
+import { Corner, Bounds } from 'types'
 
 export default function CornerHandle({
   size,
@@ -17,27 +17,41 @@ export default function CornerHandle({
   const isLeft = corner === Corner.TopLeft || corner === Corner.BottomLeft
 
   return (
-    <StyledCorner
-      corner={corner}
-      x={(isLeft ? 0 : bounds.width) - size / 2}
-      y={(isTop ? 0 : bounds.height) - size / 2}
-      width={size}
-      height={size}
-      {...events}
-    />
+    <g>
+      <StyledCorner
+        corner={corner}
+        x={(isLeft ? 0 : bounds.width) - size}
+        y={(isTop ? 0 : bounds.height) - size}
+        width={size * 2}
+        height={size * 2}
+        {...events}
+      />
+      <StyledCornerInner
+        x={(isLeft ? 0 : bounds.width) - size / 2}
+        y={(isTop ? 0 : bounds.height) - size / 2}
+        width={size}
+        height={size}
+        pointerEvents="none"
+      />
+    </g>
   )
 }
 
-const StyledCorner = styled("rect", {
-  stroke: "$bounds",
-  fill: "#fff",
-  zStrokeWidth: 2,
+const StyledCorner = styled('rect', {
+  stroke: 'none',
+  fill: 'transparent',
   variants: {
     corner: {
-      [Corner.TopLeft]: { cursor: "nwse-resize" },
-      [Corner.TopRight]: { cursor: "nesw-resize" },
-      [Corner.BottomRight]: { cursor: "nwse-resize" },
-      [Corner.BottomLeft]: { cursor: "nesw-resize" },
+      [Corner.TopLeft]: { cursor: 'nwse-resize' },
+      [Corner.TopRight]: { cursor: 'nesw-resize' },
+      [Corner.BottomRight]: { cursor: 'nwse-resize' },
+      [Corner.BottomLeft]: { cursor: 'nesw-resize' },
     },
   },
 })
+
+const StyledCornerInner = styled('rect', {
+  stroke: '$bounds',
+  fill: '#fff',
+  zStrokeWidth: 2,
+})

components/canvas/bounds/edge-handle.tsx

@@ -1,6 +1,6 @@
-import useHandleEvents from "hooks/useBoundsHandleEvents"
-import styled from "styles"
-import { Edge, Bounds } from "types"
+import useHandleEvents from 'hooks/useBoundsHandleEvents'
+import styled from 'styles'
+import { Edge, Bounds } from 'types'
 
 export default function EdgeHandle({
   size,
@@ -28,15 +28,15 @@ export default function EdgeHandle({
   )
 }
 
-const StyledEdge = styled("rect", {
-  stroke: "none",
-  fill: "none",
+const StyledEdge = styled('rect', {
+  stroke: 'none',
+  fill: 'none',
   variants: {
     edge: {
-      [Edge.Top]: { cursor: "ns-resize" },
-      [Edge.Right]: { cursor: "ew-resize" },
-      [Edge.Bottom]: { cursor: "ns-resize" },
-      [Edge.Left]: { cursor: "ew-resize" },
+      [Edge.Top]: { cursor: 'ns-resize' },
+      [Edge.Right]: { cursor: 'ew-resize' },
+      [Edge.Bottom]: { cursor: 'ns-resize' },
+      [Edge.Left]: { cursor: 'ew-resize' },
     },
   },
 })

components/code-panel/code-editor.tsx

@@ -1,11 +1,11 @@
-import Editor, { Monaco } from "@monaco-editor/react"
-import useTheme from "hooks/useTheme"
-import prettier from "prettier/standalone"
-import parserTypeScript from "prettier/parser-typescript"
-import codeAsString from "./code-as-string"
-import React, { useCallback, useEffect, useRef } from "react"
-import styled from "styles"
-import { IMonaco, IMonacoEditor } from "types"
+import Editor, { Monaco } from '@monaco-editor/react'
+import useTheme from 'hooks/useTheme'
+import prettier from 'prettier/standalone'
+import parserTypeScript from 'prettier/parser-typescript'
+import codeAsString from './code-as-string'
+import React, { useCallback, useEffect, useRef } from 'react'
+import styled from 'styles'
+import { IMonaco, IMonacoEditor } from 'types'
 
 interface Props {
   value: string
@@ -48,7 +48,7 @@ export default function CodeEditor({
       checkJs: false,
       strict: false,
       noLib: true,
-      lib: ["es6"],
+      lib: ['es6'],
       target: monaco.languages.typescript.ScriptTarget.ES2015,
       allowNonTsExtensions: true,
     })
@@ -69,13 +69,13 @@ export default function CodeEditor({
 
     monaco.languages.typescript.javascriptDefaults.addExtraLib(codeAsString)
 
-    monaco.languages.registerDocumentFormattingEditProvider("javascript", {
+    monaco.languages.registerDocumentFormattingEditProvider('javascript', {
       async provideDocumentFormattingEdits(model) {
         const text = prettier.format(model.getValue(), {
-          parser: "typescript",
+          parser: 'typescript',
           plugins: [parserTypeScript],
           singleQuote: true,
-          trailingComma: "es5",
+          trailingComma: 'es5',
           semi: false,
         })
 
@@ -114,12 +114,12 @@ export default function CodeEditor({
     (e: React.KeyboardEvent<HTMLDivElement>) => {
       onKey && onKey()
       e.stopPropagation()
-      const metaKey = navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey
-      if (e.key === "s" && metaKey) {
+      const metaKey = navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey
+      if (e.key === 's' && metaKey) {
         const editor = rEditor.current
         if (!editor) return
         editor
-          .getAction("editor.action.formatDocument")
+          .getAction('editor.action.formatDocument')
           .run()
           .then(() =>
             onSave(rEditor.current?.getModel().getValue(), rEditor.current)
@@ -127,10 +127,10 @@ export default function CodeEditor({
 
         e.preventDefault()
       }
-      if (e.key === "p" && metaKey) {
+      if (e.key === 'p' && metaKey) {
         e.preventDefault()
       }
-      if (e.key === "d" && metaKey) {
+      if (e.key === 'd' && metaKey) {
         e.preventDefault()
       }
     },
@@ -167,7 +167,7 @@ export default function CodeEditor({
         ),
         options: {
           isWholeLine: true,
-          className: "editorLineError",
+          className: 'editorLineError',
         },
       },
     ])
@@ -176,7 +176,7 @@ export default function CodeEditor({
   useEffect(() => {
     const monaco = rMonaco.current
     if (!monaco) return
-    monaco.editor.setTheme(theme === "dark" ? "vs-dark" : "light")
+    monaco.editor.setTheme(theme === 'dark' ? 'vs-dark' : 'light')
   }, [theme])
 
   useEffect(() => {
@@ -194,7 +194,7 @@ export default function CodeEditor({
         height="100%"
         language="javascript"
         value={value}
-        theme={theme === "dark" ? "vs-dark" : "light"}
+        theme={theme === 'dark' ? 'vs-dark' : 'light'}
         beforeMount={handleBeforeMount}
         onMount={handleMount}
         onChange={handleChange}
@@ -203,12 +203,12 @@ export default function CodeEditor({
   )
 }
 
-const EditorContainer = styled("div", {
-  height: "100%",
-  pointerEvents: "all",
-  userSelect: "all",
+const EditorContainer = styled('div', {
+  height: '100%',
+  pointerEvents: 'all',
+  userSelect: 'all',
 
-  ".editorLineError": {
-    backgroundColor: "$lineError",
+  '.editorLineError': {
+    backgroundColor: '$lineError',
   },
 })

components/editor.tsx

@@ -40,9 +40,11 @@ const Layout = styled('div', {
   left: 0,
   bottom: 0,
   right: 0,
+  height: '100%',
+  width: '100%',
   display: 'grid',
-  gridTemplateRows: '1fr auto 40px',
-  gridTemplateColumns: 'minmax(50%, 400px) 1fr auto',
+  gridTemplateRows: '1fr auto 144px',
+  gridTemplateColumns: 'minmax(0, 720px) 1fr auto',
   gridTemplateAreas: `
     "leftPanels main rightPanels"
     "tools tools tools"
@@ -59,11 +61,11 @@ const LeftPanels = styled('main', {
 })
 
 const RightPanels = styled('main', {
-  display: 'grid',
   gridArea: 'rightPanels',
-  gridTemplateRows: 'auto',
-  height: 'fit-content',
-  justifyContent: 'flex-end',
   padding: 8,
-  gap: 8,
+  // display: 'grid',
+  // gridTemplateRows: 'auto',
+  // height: 'fit-content',
+  // justifyContent: 'flex-end',
+  // gap: 8,
 })

components/panel.tsx

@@ -13,10 +13,7 @@ export const Root = styled('div', {
 
   variants: {
     isOpen: {
-      true: {
-        width: 'auto',
-        minWidth: 300,
-      },
+      true: {},
       false: {
         height: 34,
         width: 34,