Merge pull request #1632 from kleros/fix(web)-prevent-long-text-overflow

fix(web): prevent long text overflow

Author: alcercu

web/src/components/DisputePreview/Alias.tsx

@@ -12,13 +12,18 @@ const AliasContainer = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
+  max-width: 100%;
 `;
 
 const TextContainer = styled.div`
   display: flex;
+  flex-wrap: wrap;
+  max-width: 100%;
   > label {
     color: ${({ theme }) => theme.primaryText};
     font-size: 14px;
+    word-wrap: break-word;
+    max-width: 100%;
   }
 `;
 

web/src/components/DisputePreview/DisputeContext.tsx

@@ -16,11 +16,13 @@ import AliasDisplay from "./Alias";
 
 const StyledH1 = styled.h1`
   margin: 0;
+  word-wrap: break-word;
 `;
 
 const QuestionAndDescription = styled.div`
   display: flex;
   flex-direction: column;
+  word-wrap: break-word;
   div:first-child p:first-of-type {
     font-size: 16px;
     font-weight: 600;
@@ -47,6 +49,9 @@ const Answer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: ${responsiveSize(2, 8)};
+  > label {
+    max-width: 100%;
+  }
 `;
 
 const AliasesContainer = styled.div`

web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

@@ -52,6 +52,17 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
     `};
 `;
 
+const StyledField = styled(Field)`
+  max-width: 100%;
+  label {
+    &.value {
+      margin-left: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+`;
+
 type IDisputeInfoCard = { fieldItems: FieldItem[] } & IDisputeInfo;
 
 const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
@@ -75,12 +86,12 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
     <Container>
       {court && courtId && isOverview && (
         <CourtBranchFieldContainer>
-          <Field icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
+          <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
         </CourtBranchFieldContainer>
       )}
       <RestOfFieldsContainer {...{ isOverview }}>
         {fieldItems.map((item) =>
-          item.display ? <Field key={item.name} {...(item as IField)} {...{ isOverview }} /> : null
+          item.display ? <StyledField key={item.name} {...(item as IField)} {...{ isOverview }} /> : null
         )}
       </RestOfFieldsContainer>
       {showLabels ? <CardLabel disputeId={disputeID} round={round - 1} /> : null}

web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx

@@ -1,8 +1,12 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
+
 import { responsiveSize } from "styles/responsiveSize";
+
 import Field, { IField } from "components/Field";
+
 import CardLabel from "../CardLabels";
+
 import { FieldItem, IDisputeInfo } from ".";
 
 const Container = styled.div<{ isLabel?: boolean }>`
@@ -29,15 +33,29 @@ const RestOfFieldsContainer = styled.div`
 const StyledField = styled(Field)<{ style?: string }>`
   ${({ style }) => style ?? ""}
 `;
+
+const truncateText = (text: string, limit: number) => {
+  if (text && text.length > limit) {
+    return text.substring(0, limit) + "...";
+  }
+  return text;
+};
+
 type IDisputeInfoList = { fieldItems: FieldItem[] } & IDisputeInfo;
 const DisputeInfoList: React.FC<IDisputeInfoList> = ({ fieldItems, showLabels, disputeID, round }) => {
+  const FieldItems = useMemo(
+    () =>
+      fieldItems.map((item) =>
+        item.display ? (
+          <StyledField key={item.name} {...(item as IField)} value={truncateText(item.value, 20)} displayAsList />
+        ) : null
+      ),
+    [fieldItems]
+  );
+
   return (
     <Container isLabel={showLabels}>
-      <RestOfFieldsContainer>
-        {fieldItems.map((item) =>
-          item.display ? <StyledField key={item.name} {...(item as IField)} displayAsList /> : null
-        )}
-      </RestOfFieldsContainer>
+      <RestOfFieldsContainer>{FieldItems}</RestOfFieldsContainer>
       {showLabels ? <CardLabel disputeId={disputeID} round={round - 1} isList /> : null}
     </Container>
   );

web/src/components/Field.tsx

@@ -21,6 +21,7 @@ const FieldContainer = styled.div<FieldContainerProps>`
     fill: ${({ theme }) => theme.secondaryPurple};
     margin-right: 8px;
     width: 14px;
+    flex-shrink: 0;
   }
 
   ${({ isList }) =>

web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx

@@ -38,9 +38,22 @@ const TopContainer = styled.div`
   display: flex;
   justify-content: space-between;
   height: 50%;
-  .block {
-    display: block;
-  }
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0;
+`;
+
+const BlockLabel = styled.label`
+  display: block;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 `;
 
 const LabelContainer = styled.div`
@@ -82,13 +95,13 @@ const OptionCard: React.FC<IOptionCard> = ({
   return (
     <StyledCard ref={ref} hover {...props}>
       <TopContainer>
-        <div>
-          <small className="block">{text}</small>
+        <TextContainer>
+          <BlockLabel>{text}</BlockLabel>
           <WinnerLabel winner={winner ? true : false}>
             <Gavel />
             Jury decision - {winner ? "Winner" : "Loser"}
           </WinnerLabel>
-        </div>
+        </TextContainer>
         {canBeSelected && <StyledRadio label="" checked={selected} />}
       </TopContainer>
       <LabelContainer>

web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx

@@ -45,6 +45,11 @@ const StyledTitle = styled.h1`
   margin-bottom: 0;
 `;
 
+const StyledReactMarkDown = styled(ReactMarkdown)`
+  max-width: inherit;
+  word-wrap: break-word;
+`;
+
 const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean }> = ({ arbitrable, isQuestion }) => {
   const { id } = useParams();
   const { data: votingHistory } = useVotingHistory(id);
@@ -79,9 +84,9 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
           {isQuestion && (
             <>
               {disputeDetails.question ? (
-                <ReactMarkdown>{disputeDetails.question}</ReactMarkdown>
+                <StyledReactMarkDown>{disputeDetails.question}</StyledReactMarkDown>
               ) : (
-                <ReactMarkdown>{isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR}</ReactMarkdown>
+                <StyledReactMarkDown>{isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR}</StyledReactMarkDown>
               )}
             </>
           )}