Adjust token attachment size to be resolution independent

src/components/konva/TokenAttachment.tsx

@@ -13,27 +13,29 @@ function TokenAttachment({
   highlight,
   radius,
 }: TokenAttachmentProps) {
+  const width = radius / 3;
+  const height = radius / 8;
   return (
     <Group>
       {/* Make a bigger hidden rect for hit registration */}
       <Rect
-        width={10}
+        width={width * 2}
-        height={5}
+        height={height * 2}
-        x={-5}
+        x={-width}
-        y={tokenHeight / 2 - 2.5}
+        y={tokenHeight / 2 - height}
         cornerRadius={2.5}
         fill="transparent"
       />
       <Rect
-        width={5}
+        width={width}
-        height={2}
+        height={height}
-        x={-2.5}
+        x={-width / 2}
-        y={tokenHeight / 2 - 1}
+        y={tokenHeight / 2 - height / 2}
         cornerRadius={2.5}
-        fill="rgba(36, 39, 51, 0.5)"
+        fill="rgba(36, 39, 51, 0.8)"
-        shadowColor="rgba(0,0,0,0.12)"
+        shadowColor="rgba(0,0,0,0.5)"
-        shadowOffsetY={1}
+        shadowOffsetY={radius / 40}
-        shadowBlur={2}
+        shadowBlur={radius / 15}
         hitFunc={() => {}}
       />
       {dragging ? (