From 2729ea31072dcfcf175ee0257540a4b72b3d7a8c Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sun, 3 May 2026 00:06:56 +0200
Subject: [PATCH] Adjust spacing, colors, and text formatting in Compatibility
 Questions display for improved visual consistency

---
 .../answers/compatibility-questions-display.tsx        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/components/answers/compatibility-questions-display.tsx b/web/components/answers/compatibility-questions-display.tsx
index ed7d0fe2..8e16f268 100644
--- a/web/components/answers/compatibility-questions-display.tsx
+++ b/web/components/answers/compatibility-questions-display.tsx
@@ -453,7 +453,7 @@ export function CompatibilityAnswerBlock(props: {
     <Col
       data-testid="profile-compatibility-section"
       className={
-        'bg-canvas-50 border border-canvas-200 flex-grow gap-4 whitespace-pre-line rounded-xl p-4 leading-relaxed'
+        'bg-canvas-50 border border-canvas-200 flex-grow gap-2 whitespace-pre-line rounded-xl p-4 leading-relaxed'
       }
     >
       <Row
@@ -535,14 +535,14 @@ export function CompatibilityAnswerBlock(props: {
       </Row>
       {answerText && (
         <Row
-          className="bg-canvas-100 w-fit gap-1 rounded-xl px-2 py-1 text-sm"
+          className="bg-canvas-200 w-fit gap-1 rounded-xl px-2 py-1 text-sm"
           data-testid="profile-compatibility-question-answer"
         >
           {answerText}
         </Row>
       )}
-      <Row className="px-2 -mt-4" data-testid="profile-compatibility-question-answer-explanation">
-        {answer?.explanation && <Linkify className="" text={answer.explanation} />}
+      <Row className="px-2" data-testid="profile-compatibility-question-answer-explanation">
+        {answer?.explanation && <Linkify className="" text={`"${answer.explanation}"`} />}
       </Row>
       {distinctPreferredAnswersText.length > 0 && (
         <Col className="gap-2">
@@ -556,7 +556,7 @@ export function CompatibilityAnswerBlock(props: {
             data-testid="profile-compatibility-question-acceptable-answer"
           >
             {distinctPreferredAnswersText.map((text) => (
-              <Row key={text} className="bg-canvas-100 w-fit gap-1 rounded-xl px-2 py-1 text-sm">
+              <Row key={text} className="bg-canvas-200 w-fit gap-1 rounded-xl px-2 py-1 text-sm">
                 {text}
               </Row>
             ))}