From 03bf65e7cdaae527045ecda11e30e6c4c7af858b Mon Sep 17 00:00:00 2001
From: Ciel Bellerose <kcbellerose@icloud.com>
Date: Fri, 11 Sep 2026 17:10:38 -0400
Subject: [PATCH] #694 render long answers inline like every other answer type

Drop the isFullWidthAnswer special case so every row uses the one
label/value grid; add break-words to the long-answer <dd> so an
unbroken string wraps instead of overflowing the narrower inline
column. Skeleton's third row now matches the same grid shape.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 components/features/application-answers-list.tsx     | 12 ++----------
 components/features/application-answers-skeleton.tsx |  9 ++++++---
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/components/features/application-answers-list.tsx b/components/features/application-answers-list.tsx
index 0d12741d..36dcd265 100644
--- a/components/features/application-answers-list.tsx
+++ b/components/features/application-answers-list.tsx
@@ -68,7 +68,7 @@ function AnswerValue({
           <ChipList values={answer.value} />
         </dd>
       ) : (
-        <dd className="max-w-prose text-sm leading-relaxed whitespace-pre-wrap">
+        <dd className="max-w-prose text-sm leading-relaxed break-words whitespace-pre-wrap">
           {answer.value[0]}
         </dd>
       );
@@ -87,10 +87,6 @@ function AnswerValue({
   }
 }
 
-function isFullWidthAnswer(answer: ApplicationReviewAnswer) {
-  return answer.type === 'long_answer' && answer.value.length === 1;
-}
-
 export function ApplicationAnswersList({
   answers,
   emptyMessage,
@@ -106,11 +102,7 @@ export function ApplicationAnswersList({
       {answers.map((answer) => (
         <div
           key={answer.id}
-          className={
-            isFullWidthAnswer(answer)
-              ? 'flex flex-col gap-1.5 px-4 py-3'
-              : 'px-4 py-3 sm:grid sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)] sm:gap-4'
-          }
+          className="px-4 py-3 sm:grid sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)] sm:gap-4"
         >
           <dt className="text-muted-foreground text-sm">
             {answer.questionLabel}
diff --git a/components/features/application-answers-skeleton.tsx b/components/features/application-answers-skeleton.tsx
index da43dcbc..af01618f 100644
--- a/components/features/application-answers-skeleton.tsx
+++ b/components/features/application-answers-skeleton.tsx
@@ -1,5 +1,8 @@
 import { Skeleton } from '@/components/ui/skeleton';
 
+const ANSWER_ROW_CLASS =
+  'px-4 py-3 sm:grid sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)] sm:gap-4';
+
 export function AnswersCardSkeleton({ titleWidth }: { titleWidth: string }) {
   return (
     <div className="gap-0 overflow-hidden rounded-xl border p-0 shadow-sm">
@@ -7,15 +10,15 @@ export function AnswersCardSkeleton({ titleWidth }: { titleWidth: string }) {
         <Skeleton className={`h-5 ${titleWidth}`} />
       </div>
       <div className="divide-y">
-        <div className="px-4 py-3 sm:grid sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)] sm:gap-4">
+        <div className={ANSWER_ROW_CLASS}>
           <Skeleton className="h-4 w-24" />
           <Skeleton className="h-4 w-full" />
         </div>
-        <div className="px-4 py-3 sm:grid sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)] sm:gap-4">
+        <div className={ANSWER_ROW_CLASS}>
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-4 w-3/4" />
         </div>
-        <div className="flex flex-col gap-1.5 px-4 py-3">
+        <div className={ANSWER_ROW_CLASS}>
           <Skeleton className="h-4 w-20" />
           <Skeleton className="h-16 w-full max-w-prose" />
         </div>