Merge pull request #8790 from LedgerHQ/bugfix/lld-send-error-message-…

…layout 💄 LLD - Fix Send StepConfirmation error message layout that was broken on some languages
LedgerHQ · Jan 3, 2025 · c6783d2 · c6783d2
2 parents 32492e0 + 386a51b
commit c6783d2
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 31 deletions.
diff --git a/.changeset/chilled-coats-drive.md b/.changeset/chilled-coats-drive.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+LLD - Fix Send StepConfirmation error message layout that was broken on some languages
diff --git a/...ledger-live-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/HelpSection.tsx b/...ledger-live-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/HelpSection.tsx
@@ -7,7 +7,16 @@ type Props = {
   onGetHelp: () => void;
 };
 
+const Container = styled(Flex)`
+  --line-clamp: 2;
+
+  &:hover {
+    --line-clamp: unset;
+  }
+`;
+
 const InteractFlex = styled(Flex)`
+  height: 40px;
   &:hover {
     cursor: pointer;
     background-color: ${({ theme }) => theme.colors.palette.opacityDefault.c10};
@@ -24,34 +33,40 @@ const InteractFlex = styled(Flex)`
 `;
 
 const StyledText = styled(Text)`
-  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 6px;
 `;
 
 const HelpSection = ({ onGetHelp }: Props) => {
   const { t } = useTranslation();
   return (
-    <Flex
-      alignItems="start"
-      flexDirection="column"
-      rowGap={2}
+    <Container
+      flexDirection="row"
       bg="opacityDefault.c05"
       borderRadius={8}
       justifyContent="space-between"
-      p={2}
-      minHeight="128px"
+      p={3}
       flex={1}
+      mb={2}
+      width="100%"
     >
-      <Text variant="bodyLineHeight" fontSize={13}>
-        {t("errors.TransactionBroadcastError.helpCenterTitle")}
-        <Text color="neutral.c70">{t("errors.TransactionBroadcastError.helpCenterDesc")}</Text>
-      </Text>
-      <InteractFlex onClick={onGetHelp}>
+      <Flex flexShrink={1}>
+        <StyledText variant="bodyLineHeight" fontSize={13} flex={1} color="neutral.c70">
+          <Text color="neutral.c100">{t("errors.TransactionBroadcastError.helpCenterTitle")}</Text>
+          <Text color="neutral.c70">{t("errors.TransactionBroadcastError.helpCenterDesc")}</Text>
+        </StyledText>
+      </Flex>
+      <InteractFlex onClick={onGetHelp} flexShrink={0} flexGrow={0} alignSelf={"start"}>
         <Icons.Support color="neutral.c100" size="S" />
         <StyledText variant="bodyLineHeight" fontSize={13}>
           {t("errors.TransactionBroadcastError.getHelp")}
         </StyledText>
       </InteractFlex>
-    </Flex>
+    </Container>
   );
 };
 

diff --git a/...e-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/TechnicalErrorSection.tsx b/...e-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/TechnicalErrorSection.tsx
@@ -9,7 +9,16 @@ type Props = {
   onSaveLogs: () => void;
 };
 
+const Container = styled(Flex)`
+  --line-clamp: 2;
+
+  &:hover {
+    --line-clamp: unset;
+  }
+`;
+
 const InteractFlex = styled(Flex)`
+  height: 40px;
   &:hover {
     cursor: pointer;
     background-color: ${({ theme }) => theme.colors.palette.opacityDefault.c10};
@@ -26,11 +35,12 @@ const InteractFlex = styled(Flex)`
 `;
 
 const StyledText = styled(Text)`
-  word-break: break-all;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp);
   overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 6px;
 `;
 
 const TechnicalErrorSection = ({ error, onSaveLogs }: Props) => {
@@ -49,28 +59,33 @@ const TechnicalErrorSection = ({ error, onSaveLogs }: Props) => {
   };
 
   return (
-    <Flex
-      alignItems="flex-start"
-      flexDirection="column"
+    <Container
+      flexDirection="row"
       bg="opacityDefault.c05"
       borderRadius={8}
       justifyContent="space-between"
-      p={2}
+      p={3}
+      flex={1}
+      width="100%"
     >
-      <StyledText variant="bodyLineHeight" fontSize={13} width="100%">
-        {t("errors.TransactionBroadcastError.technicalErrorTitle")}
-        <Text color="neutral.c70">{error.message}</Text>
-      </StyledText>
-      <Flex columnGap={2}>
-        <InteractFlex onClick={onSaveLogs}>
+      <Flex flexShrink={1}>
+        <StyledText variant="bodyLineHeight" fontSize={13} flex={1} color="neutral.c70">
+          <Text color="neutral.c100">
+            {t("errors.TransactionBroadcastError.technicalErrorTitle")}
+          </Text>
+          <Text color="neutral.c70">{error.message}</Text>
+        </StyledText>
+      </Flex>
+      <Flex columnGap={2} alignSelf="start">
+        <InteractFlex onClick={onSaveLogs} flexShrink={1}>
           <Icons.Download color="neutral.c100" size="S" />
           <Text variant="bodyLineHeight" fontSize={13}>
             {t("errors.TransactionBroadcastError.saveLogs")}
           </Text>
         </InteractFlex>
         <InteractFlex onClick={handleCopyError}>{icon}</InteractFlex>
       </Flex>
-    </Flex>
+    </Container>
   );
 };
 

diff --git a/apps/ledger-live-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/index.tsx b/apps/ledger-live-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Flex, Grid, Icons, Text } from "@ledgerhq/react-ui";
+import { Flex, Icons, Text } from "@ledgerhq/react-ui";
 import styled, { useTheme } from "styled-components";
 import { CircleWrapper } from "~/renderer/components/CryptoCurrencyIcon";
 import { useExportLogs } from "LLD/hooks/useExportLogs";
@@ -46,7 +46,7 @@ const NodeError: React.FC<Props> = ({ error }) => {
     <Flex
       justifyContent="center"
       alignItems="center"
-      width={"90%"}
+      width="100%"
       rowGap={32}
       flexDirection="column"
     >
@@ -72,7 +72,7 @@ const NodeError: React.FC<Props> = ({ error }) => {
           }
         />
       </Flex>
-      <Flex flexDirection="column" rowGap={16} width="100%" alignItems="flex-start">
+      <Flex flexDirection="column" rowGap={16} flex={1} alignItems="flex-start">
         <InteractFlex alignItems="center" onClick={onShowMore}>
           <Text variant="bodyLineHeight" fontSize={13}>
             {t("errors.TransactionBroadcastError.needHelp")}
@@ -85,10 +85,10 @@ const NodeError: React.FC<Props> = ({ error }) => {
           )}
         </InteractFlex>
         {isShowMore && (
-          <Grid columns={2} columnGap="8px" width="100%">
+          <Flex flexDirection="column" flex={1}>
             <HelpSection onGetHelp={onGetHelp} />
             <TechnicalErrorSection error={error} onSaveLogs={onSaveLogs} />
-          </Grid>
+          </Flex>
         )}
       </Flex>
     </Flex>