bug(subscription) fix plan list display if long name and code

getlago · Nov 6, 2023 · abe9357 · abe9357
1 parent 42576cf
commit abe9357
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/src/pages/CreateSubscription.tsx b/src/pages/CreateSubscription.tsx
@@ -26,6 +26,7 @@ import {
   DatePickerField,
   TextInputField,
 } from '~/components/form'
+import { Item } from '~/components/form/ComboBox/ComboBoxItem'
 import {
   EditInvoiceDisplayName,
   EditInvoiceDisplayNameRef,
@@ -266,9 +267,15 @@ const CreateSubscription = () => {
         {
           label: `${name} - (${code})`,
           labelNode: (
-            <PlanItem>
-              {name} <Typography color="textPrimary">({code})</Typography>
-            </PlanItem>
+            <Item>
+              <Typography color="grey700" noWrap>
+                {name}
+              </Typography>
+              &nbsp;
+              <Typography color="textPrimary" noWrap>
+                ({code})
+              </Typography>
+            </Item>
           ),
           value: id,
           disabled:
@@ -859,11 +866,6 @@ const ResponsiveButtonWrapper = styled.div`
   padding: ${theme.spacing(3)} ${theme.spacing(12)};
 `
 
-const PlanItem = styled.span`
-  display: flex;
-  white-space: pre;
-`
-
 const FreemiumCard = styled(Card)`
   display: flex;
   justify-content: space-between;