fix(v2): fix overflow in workspace row #4069
Conversation
| @@ -13,7 +13,7 @@ export const CollaboratorText: FC = ({ children }) => { | |||
| <Text | |||
| textStyle={{ base: 'subhead-1', md: 'body-2' }} | |||
| color={{ base: 'secondary.700', md: 'secondary.500' }} | |||
| isTruncated | |||
| noOfLines={{ base: 0, md: 1 }} | |||
There was a problem hiding this comment.
If this is truncated, is there any other way to see the full emails of existing collaborators?
There was a problem hiding this comment.
good point. added a title; hovering the row would now display the full email.
| @@ -32,7 +32,7 @@ export const FieldLogicBadge = ({ field }: FieldLogicBadgeProps) => { | |||
| <Icon as={fieldMeta.icon} fontSize="1rem" /> | |||
| </Tooltip> | |||
| {field.questionNumber ? <Text>{field.questionNumber}.</Text> : null} | |||
| <Text isTruncated>{field.title}</Text> | |||
| <Text noOfLines={1}>{field.title}</Text> | |||
There was a problem hiding this comment.
why do we truncate the field name here? feels like it does not need to be truncated right haha
the current behavior of dropdown logic does not truncate the option selected, as shown below
There was a problem hiding this comment.
no clue, preserving current behavior. can always fix in a new issue.
| @@ -32,7 +32,7 @@ export const FieldLogicBadge = ({ field }: FieldLogicBadgeProps) => { | |||
| <Icon as={fieldMeta.icon} fontSize="1rem" /> | |||
| </Tooltip> | |||
| {field.questionNumber ? <Text>{field.questionNumber}.</Text> : null} | |||
| <Text isTruncated>{field.title}</Text> | |||
| <Text noOfLines={1}>{field.title}</Text> | |||
There was a problem hiding this comment.
unrelated to this PR: should fix delete box overlapping with long field title, regardless of truncated or not. For reference:
truncated
not truncated
edit: created issue #4076
karrui
requested review from
wanlingt and
justynoh
and removed request for
justynoh
Problem
Extremely long form titles were resulting in incorrect overflow of the page. This PR fixes that bug.
Also replace deprecated usage of
isTruncatedprop and replace them with thenoOfLineprop.Solution
Breaking Changes
Improvements:
Bug Fixes:
Before & After Screenshots
BEFORE:
AFTER: