From a4a39185b7860439700d45c7082cf1949b0dafb0 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 9 Jan 2024 14:17:22 +0530
Subject: [PATCH] feat(web): option-description-display-in-dispute-context

---
 web/src/components/DisputePreview/DisputeContext.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx
index 8e277ff99..65d0c1217 100644
--- a/web/src/components/DisputePreview/DisputeContext.tsx
+++ b/web/src/components/DisputePreview/DisputeContext.tsx
@@ -5,6 +5,7 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
 import { Answer as IAnswer, IDisputeTemplate } from "context/NewDisputeContext";
 import AliasDisplay from "./Alias";
+import { responsiveSize } from "styles/responsiveSize";
 
 const StyledH1 = styled.h1`
   margin: 0;
@@ -37,12 +38,14 @@ const AnswersContainer = styled.div`
 const Answer = styled.div`
   margin: 0px;
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(2, 8)};
 `;
 
 const AliasesContainer = styled.div`
   display: flex;
-  gap: 20px;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(8, 20)};
 `;
 
 const Divider = styled.hr`
@@ -84,7 +87,10 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeTemplate }) =
           {disputeTemplate?.answers?.map((answer: IAnswer, i: number) => (
             <Answer key={answer.title}>
               <small>Option {i + 1}:</small>
-              <label>{answer.title}</label>
+              <label>
+                {answer.title}
+                {answer.description ? ` - ${answer.description}` : null}
+              </label>
             </Answer>
           ))}
         </AnswersContainer>