From d6a9b89c43153398fab8fc2af9e78b3ef5f7fe46 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Mon, 2 May 2022 10:35:46 -0400
Subject: [PATCH] Fix answers not wrapping in cards

---
 web/components/outcome-label.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/components/outcome-label.tsx b/web/components/outcome-label.tsx
index b2bc2f03..95403c75 100644
--- a/web/components/outcome-label.tsx
+++ b/web/components/outcome-label.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { Answer } from '../../common/answer'
 import { getProbability } from '../../common/calculate'
 import {
@@ -126,7 +127,14 @@ export function AnswerLabel(props: {
     truncated = text.slice(0, 75) + '...'
   }
 
-  return <span className={className}>{truncated}</span>
+  return (
+    <span
+      style={{ wordBreak: 'break-word' }}
+      className={clsx('whitespace-pre-line break-words', className)}
+    >
+      {truncated}
+    </span>
+  )
 }
 
 function FreeResponseAnswerToolTip(props: {