🐛 : [BUGFIX] Layout issue with new Gainers/Losers trend widget if LLD is in French or German

.changeset/empty-elephants-end.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+There was a Layout issue with new Gainers/Losers trend widget if LLD is in French or German

apps/ledger-live-desktop/src/renderer/components/BalanceInfos/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { AccountLike, ValueChange } from "@ledgerhq/types-live";
 import { Unit } from "@ledgerhq/types-cryptoassets";
@@ -13,6 +13,8 @@ import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import { useHistory } from "react-router-dom";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { Text } from "@ledgerhq/react-ui";
+import PilldDaysSelect from "../PillsDaysSelect";
+import { useResize } from "~/renderer/hooks/useResize";
 
 type BalanceSinceProps = {
   valueChange: ValueChange;
@@ -135,13 +137,18 @@ export default function BalanceInfos({ totalBalance, valueChange, isAvailable, u
       pathname: "/swap",
     });
   }, [history]);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const { width } = useResize(ref);
+
   return (
-    <Box flow={5}>
+    <Box flow={5} ref={ref}>
       <Box horizontal alignItems="center" justifyContent="space-between">
         <Text variant="h3Inter" fontWeight="semiBold">
           {t("dashboard.header")}
         </Text>
-        <PillsDaysCount />
+
+        {width <= 500 ? <PilldDaysSelect /> : <PillsDaysCount />}
       </Box>
       <Box horizontal>
         <BalanceTotal

apps/ledger-live-desktop/src/renderer/components/PillsDaysSelect.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from "react";
+import { PortfolioRangeOption, useTimeRange } from "~/renderer/actions/settings";
+import Select from "~/renderer/components/Select";
+
+type ChangeArgs = { value: PortfolioRangeOption; label: string };
+
+const PilldDaysSelect: React.FC = () => {
+  const [selected, onChange, options] = useTimeRange();
+
+  const mappedOptions = useMemo(
+    () =>
+      options.map(option => ({
+        label: option.label,
+        value: option,
+      })),
+    [options],
+  );
+
+  const mappedSelected = useMemo(() => {
+    const current = options.find(o => o.key === selected) ?? options[0];
+    return {
+      label: current.label,
+      value: current,
+    };
+  }, [options, selected]);
+
+  const avoidEmptyValue = (option?: ChangeArgs | null) => option && onChange(option.value);
+
+  return (
+    <Select
+      isSearchable={false}
+      small
+      minWidth={90}
+      onChange={avoidEmptyValue}
+      renderSelected={(item: { label: unknown }) => item && item.label}
+      value={mappedSelected}
+      options={mappedOptions}
+    />
+  );
+};
+
+export default PilldDaysSelect;

apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Header.tsx

@@ -11,7 +11,7 @@ import { selectedTimeRangeSelector } from "~/renderer/reducers/settings";
 const primary = "primary.c80";
 const neutral = "neutral.c70";
 
-const RESPONSIVE_WIDTH = 275;
+const RESPONSIVE_WIDTH = 330;
 
 export function MarketPerformanceWidgetHeader({ onChangeOrder, order }: HeaderProps) {
   const { t } = useTranslation();