From 96d40793247ca4d41432362e887c6a114d61df39 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Mon, 25 May 2026 16:00:44 +0000
Subject: [PATCH] Render other answers as text links

---
 .../IssueThreadInteractionCard.test.tsx       | 10 +++-
 .../components/IssueThreadInteractionCard.tsx | 54 +++++++++++--------
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/IssueThreadInteractionCard.test.tsx b/ui/src/components/IssueThreadInteractionCard.test.tsx
index eeda1cf6..1ba1762a 100644
--- a/ui/src/components/IssueThreadInteractionCard.test.tsx
+++ b/ui/src/components/IssueThreadInteractionCard.test.tsx
@@ -74,7 +74,7 @@ describe("IssueThreadInteractionCard", () => {
     );
 
     const radios = [...host.querySelectorAll('[role="radio"]')];
-    expect(radios).toHaveLength(3);
+    expect(radios).toHaveLength(2);
     expect(radios[0]?.getAttribute("aria-checked")).toBe("false");
 
     act(() => {
@@ -88,7 +88,13 @@ describe("IssueThreadInteractionCard", () => {
     expect(multiGroup?.getAttribute("aria-labelledby")).toBe(
       "interaction-questions-default-post-submit-summary-prompt",
     );
-    expect(host.querySelectorAll('[role="checkbox"]')).toHaveLength(4);
+    expect(host.querySelectorAll('[role="checkbox"]')).toHaveLength(3);
+
+    const otherLink = Array.from(host.querySelectorAll("button")).find((button) =>
+      button.textContent === "Other",
+    );
+    expect(otherLink?.getAttribute("role")).toBeNull();
+    expect(otherLink?.className).toContain("underline");
   });
 
   it("submits written Other answers for pending questions", async () => {
diff --git a/ui/src/components/IssueThreadInteractionCard.tsx b/ui/src/components/IssueThreadInteractionCard.tsx
index ca5fb09f..73239fcf 100644
--- a/ui/src/components/IssueThreadInteractionCard.tsx
+++ b/ui/src/components/IssueThreadInteractionCard.tsx
@@ -821,32 +821,40 @@ function AskUserQuestionsCard({
                 />
               </div>
 
-              <div
-                className="mt-3 grid gap-3"
-                role={question.selectionMode === "single" ? "radiogroup" : "group"}
-                aria-labelledby={`${interaction.id}-${question.id}-prompt`}
-              >
-                {question.options.map((option) => (
-                  <QuestionOptionButton
-                    key={option.id}
-                    id={`${interaction.id}-${question.id}-${option.id}`}
-                    label={option.label}
-                    description={option.description}
-                    selected={(draftAnswers[question.id] ?? []).includes(option.id)}
-                    selectionMode={question.selectionMode}
-                    onClick={() =>
-                      toggleOption(question.id, option.id, question.selectionMode)}
-                  />
-                ))}
-                <QuestionOptionButton
+              <div className="mt-3 space-y-3">
+                <div
+                  className="grid gap-3"
+                  role={question.selectionMode === "single" ? "radiogroup" : "group"}
+                  aria-labelledby={`${interaction.id}-${question.id}-prompt`}
+                >
+                  {question.options.map((option) => (
+                    <QuestionOptionButton
+                      key={option.id}
+                      id={`${interaction.id}-${question.id}-${option.id}`}
+                      label={option.label}
+                      description={option.description}
+                      selected={(draftAnswers[question.id] ?? []).includes(option.id)}
+                      selectionMode={question.selectionMode}
+                      onClick={() =>
+                        toggleOption(question.id, option.id, question.selectionMode)}
+                    />
+                  ))}
+                </div>
+                <button
+                  type="button"
                   id={`${interaction.id}-${question.id}-other`}
-                  label="Other"
-                  description="Use a written answer instead of the listed choices."
-                  selected={otherActiveQuestions[question.id] === true}
-                  selectionMode={question.selectionMode}
+                  aria-expanded={otherActiveQuestions[question.id] === true}
+                  className={cn(
+                    "text-sm font-medium underline underline-offset-4 transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                    otherActiveQuestions[question.id]
+                      ? "text-sky-700 hover:text-sky-800 dark:text-sky-300 dark:hover:text-sky-200"
+                      : "text-muted-foreground hover:text-foreground",
+                  )}
                   onClick={() =>
                     toggleOption(question.id, OTHER_ANSWER_ID, question.selectionMode)}
-                />
+                >
+                  Other
+                </button>
                 {otherActiveQuestions[question.id] ? (
                   <Textarea
                     aria-label={`Other answer for ${question.prompt}`}