chore: margin adjustments overview page

Author: kemuru

web/src/components/DisputePreview/DisputeContext.tsx

@@ -27,13 +27,10 @@ const QuestionAndDescription = styled.div`
   div:first-child p:first-of-type {
     font-size: 16px;
     font-weight: 600;
+    margin: 0;
   }
 `;
 
-const StyledReactMarkDown = styled(ReactMarkdown)`
-  margin: 0px;
-`;
-
 const VotingOptions = styled(QuestionAndDescription)`
   display: flex;
   flex-direction: column;
@@ -45,6 +42,10 @@ const AnswersContainer = styled.div`
   flex-direction: column;
 `;
 
+const AnswersHeader = styled.h3`
+  margin: 0;
+`;
+
 const Answer = styled.div`
   margin: 0px;
   display: flex;
@@ -70,11 +71,11 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
   const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR;
   return (
     <>
-      <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : disputeDetails?.title ?? errMsg}</StyledH1>
+      <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
       {!isUndefined(disputeDetails) && (
         <QuestionAndDescription>
-          <StyledReactMarkDown>{disputeDetails?.question}</StyledReactMarkDown>
-          <StyledReactMarkDown>{disputeDetails?.description}</StyledReactMarkDown>
+          <ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
+          <ReactMarkdown>{disputeDetails?.description}</ReactMarkdown>
         </QuestionAndDescription>
       )}
       {isUndefined(disputeDetails?.frontendUrl) ? null : (
@@ -83,7 +84,7 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
         </a>
       )}
       <VotingOptions>
-        {isUndefined(disputeDetails) ? null : <h3>Voting Options</h3>}
+        {isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
         <AnswersContainer>
           {disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
             <Answer key={answer.title}>