fix(poll): Wrap overly long poll options

packages/tldraw/src/lib/shapes/poll/components/CustomizedAxisTick.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+function getAverageCharacterWidth(text: string, font: string) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) return null;
+
+    ctx.font = font;
+
+    const textWidth = ctx.measureText(text).width;
+    const averageAdvance = textWidth / text.length;
+
+    return averageAdvance;
+}
+
+const TICK_SIZE = 6;
+const AVERAGE_CHAR_WIDTH = getAverageCharacterWidth('0', 'Source Sans Pro') ?? 6;
+const ELLIPSIS = '...';
+
+const CustomizedAxisTick = (props: any) => {
+    const { payload, ...restProps } = props;
+    const { width } = restProps;
+    const numberOfChars = Math.floor((width - TICK_SIZE) / AVERAGE_CHAR_WIDTH);
+    const restValue = payload.value.substring(numberOfChars, payload.value.length);
+
+    return (
+        <g>
+            <text {...restProps}>
+                {payload.value.substring(0, restValue.length > 0 ? numberOfChars - ELLIPSIS.length : numberOfChars)}
+                {restValue.length > 0 && ELLIPSIS}
+            </text>
+        </g>
+    );
+};
+
+export default CustomizedAxisTick;

packages/tldraw/src/lib/shapes/poll/components/poll-content.tsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
 import { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'
+import CustomizedAxisTick from './CustomizedAxisTick';
 import Styled from './styles'
 
 const caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {
@@ -89,7 +90,7 @@ const ChatPollContent: React.FC<ChatPollContentProps> = ({
 			<ResponsiveContainer width="90%" height={useHeight}>
 				<BarChart data={translatedAnswers} layout="vertical">
 					<XAxis type="number" allowDecimals={false} />
-					<YAxis width={80} type="category" dataKey="pollAnswer" />
+					<YAxis width={80} type="category" dataKey="pollAnswer" tick={<CustomizedAxisTick />} />
 					<Bar dataKey="numVotes" fill="#0C57A7" />
 				</BarChart>
 			</ResponsiveContainer>