From 3b4884d705b641cf1aa6bb7150d6d476b2491770 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Thu, 27 Jun 2024 14:41:51 +0530 Subject: [PATCH 1/2] fix(web): prevent long text overflow --- web/src/components/DisputePreview/Alias.tsx | 5 ++++ .../DisputePreview/DisputeContext.tsx | 5 ++++ .../DisputeInfo/DisputeInfoCard.tsx | 15 +++++++++-- .../DisputeInfo/DisputeInfoList.tsx | 16 +++++++++++- web/src/components/Field.tsx | 1 + .../Cases/CaseDetails/Appeal/OptionCard.tsx | 25 ++++++++++++++----- .../CaseDetails/Voting/VotingHistory.tsx | 9 +++++-- 7 files changed, 65 insertions(+), 11 deletions(-) diff --git a/web/src/components/DisputePreview/Alias.tsx b/web/src/components/DisputePreview/Alias.tsx index 60823df03..51c8984ae 100644 --- a/web/src/components/DisputePreview/Alias.tsx +++ b/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%; } `; diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 2a381484e..3bb5f7b1a 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/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` diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx index 80dfe71ce..c4cbf1fb1 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx @@ -52,6 +52,17 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>` `}; `; +const StyledFeild = styled(Field)` + max-width: 100%; + label { + &.value { + margin-left: 8px; + overflow: hidden; + text-overflow: ellipsis; + } + } +`; + type IDisputeInfoCard = { fieldItems: FieldItem[] } & IDisputeInfo; const DisputeInfoCard: React.FC = ({ @@ -75,12 +86,12 @@ const DisputeInfoCard: React.FC = ({ {court && courtId && isOverview && ( - + )} {fieldItems.map((item) => - item.display ? : null + item.display ? : null )} {showLabels ? : null} diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx index 2772a81d5..303d21611 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx @@ -1,8 +1,12 @@ import React 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,13 +33,23 @@ const RestOfFieldsContainer = styled.div` const StyledField = styled(Field)<{ style?: string }>` ${({ style }) => style ?? ""} `; + +const truncateText = (text, limit) => { + if (text.length > limit) { + return text.substring(0, limit) + "..."; + } + return text; +}; + type IDisputeInfoList = { fieldItems: FieldItem[] } & IDisputeInfo; const DisputeInfoList: React.FC = ({ fieldItems, showLabels, disputeID, round }) => { return ( {fieldItems.map((item) => - item.display ? : null + item.display ? ( + + ) : null )} {showLabels ? : null} diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx index 3fd4c7910..75abdae7f 100644 --- a/web/src/components/Field.tsx +++ b/web/src/components/Field.tsx @@ -21,6 +21,7 @@ const FieldContainer = styled.div` fill: ${({ theme }) => theme.secondaryPurple}; margin-right: 8px; width: 14px; + flex-shrink: 0; } .link { diff --git a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx index 053f83f7b..c301e70e6 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx +++ b/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 = ({ return ( -
- {text} + + {text} Jury decision - {winner ? "Winner" : "Loser"} -
+ {canBeSelected && } diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx index e8bdd5396..d40f2f8ce 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx +++ b/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 ? ( - {disputeDetails.question} + {disputeDetails.question} ) : ( - {isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR} + {isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR} )} )} From 28f26bd428dc4cc1151421a9c8ec9368cd9eb902 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Thu, 27 Jun 2024 15:28:09 +0530 Subject: [PATCH 2/2] fix(web): memoized FieldItems & fixed typo --- .../DisputeInfo/DisputeInfoCard.tsx | 6 ++--- .../DisputeInfo/DisputeInfoList.tsx | 24 +++++++++++-------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx index c4cbf1fb1..5e300c4b8 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx @@ -52,7 +52,7 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>` `}; `; -const StyledFeild = styled(Field)` +const StyledField = styled(Field)` max-width: 100%; label { &.value { @@ -86,12 +86,12 @@ const DisputeInfoCard: React.FC = ({ {court && courtId && isOverview && ( - + )} {fieldItems.map((item) => - item.display ? : null + item.display ? : null )} {showLabels ? : null} diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx index 303d21611..65c0bdec7 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import styled from "styled-components"; import { responsiveSize } from "styles/responsiveSize"; @@ -34,8 +34,8 @@ const StyledField = styled(Field)<{ style?: string }>` ${({ style }) => style ?? ""} `; -const truncateText = (text, limit) => { - if (text.length > limit) { +const truncateText = (text: string, limit: number) => { + if (text && text.length > limit) { return text.substring(0, limit) + "..."; } return text; @@ -43,15 +43,19 @@ const truncateText = (text, limit) => { type IDisputeInfoList = { fieldItems: FieldItem[] } & IDisputeInfo; const DisputeInfoList: React.FC = ({ fieldItems, showLabels, disputeID, round }) => { + const FieldItems = useMemo( + () => + fieldItems.map((item) => + item.display ? ( + + ) : null + ), + [fieldItems] + ); + return ( - - {fieldItems.map((item) => - item.display ? ( - - ) : null - )} - + {FieldItems} {showLabels ? : null} );