fix(lld): device selector alignment and text overflow

LedgerHQ · Jul 10, 2024 · 8b79952 · 8b79952
1 parent fc3924d
commit 8b79952
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/silver-grapes-heal.md b/.changeset/silver-grapes-heal.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Fix Device Selector alignment and text overflow
diff --git a/...-desktop/src/renderer/components/Onboarding/Screens/SelectDevice/DeviceSelectorOption.tsx b/...-desktop/src/renderer/components/Onboarding/Screens/SelectDevice/DeviceSelectorOption.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 const DeviceIllustrationContainer = styled(Flex)`
   transition: transform ease-out 150ms;
   will-change: transform;
+  height: 260px;
 `;
 
 type BorderProps = ThemeProps<DefaultTheme> & { isFirst: boolean; isLast: boolean };
@@ -62,6 +63,11 @@ const DeviceName = styled(Text).attrs({
   fontSize: 24,
   fontWeight: "semiBold",
   fontFamily: "Inter",
+  textAlign: "center",
+  paddingLeft: 4,
+  paddingRight: 4,
+  marginTop: 32,
+  height: 60,
 })``;
 
 interface DeviceSelectOptionProps {
@@ -86,7 +92,7 @@ export function DeviceSelectorOption({
     <Container data-test-id={`v3-container-${id}`} {...{ id, isFirst, isLast }}>
       <ContentContainer>
         <DeviceIllustrationContainer>{Illu}</DeviceIllustrationContainer>
-        <DeviceName marginTop="32px">{label}</DeviceName>
+        <DeviceName>{label}</DeviceName>
         <SelectButton data-test-id={`v3-${id}`} variant="main" onClick={onClick}>
           {t("onboarding.screens.selectDevice.selectLabel")}
         </SelectButton>