[LW-10533] Assets list on the transaction summary page is broken (#1145)

* fix: style and add story

* fix: asset info overflow

Author: Lucas

packages/core/src/ui/components/OutputSummary/OutputSummary.module.scss

@@ -7,6 +7,19 @@
   display: flex;
 }
 
+@mixin right-align {
+  @include half-display;
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+}
+
+.assetInfo {
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -32,7 +45,7 @@
 }
 
 .assetList {
-  @include half-display;
+  @include right-align;
   gap: size_unit(4);
 }
 

packages/core/src/ui/components/OutputSummary/OutputSummary.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { OutputSummary } from './OutputSummary';
+import { ComponentProps } from 'react';
+import { Wallet } from '@lace/cardano';
+
+const meta: Meta<typeof OutputSummary> = {
+  title: 'OutputSummary',
+  component: OutputSummary,
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof OutputSummary>;
+
+const ownAddress = Wallet.Cardano.PaymentAddress(
+  'addr_test1qq585l3hyxgj3nas2v3xymd23vvartfhceme6gv98aaeg9muzcjqw982pcftgx53fu5527z2cj2tkx2h8ux2vxsg475q2g7k3g'
+);
+
+const data: ComponentProps<typeof OutputSummary> = {
+  list: [
+    {
+      assetAmount: '1 ADA',
+      fiatAmount: '1000 USD'
+    },
+    {
+      assetAmount: '1 NFT',
+      fiatAmount: '-'
+    },
+    {
+      assetAmount: '1234 FT',
+      fiatAmount: '100 USD'
+    },
+    {
+      assetAmount: '648823ffdad1610b4162f4dbc87bd47f6f9cf45d772ddef661eff198775348494241 FT',
+      fiatAmount: '1 USD'
+    }
+  ],
+  recipientAddress: ownAddress,
+  recipientName: 'My Address',
+  translations: {
+    recipientAddress: 'Recipient address',
+    sending: 'Sending'
+  }
+};
+
+export const Overview: Story = {
+  args: {
+    ...data
+  }
+};
+
+export const OwnAddress: Story = {
+  args: {
+    ownAddresses: [ownAddress],
+    ...data
+  }
+};

packages/core/src/ui/components/OutputSummary/OutputSummaryUtils.tsx

@@ -12,7 +12,7 @@ export const RowContainer = (props: { children: React.ReactNode; key?: string })
 );
 
 export const renderAmountInfo = (amount: string, fiat: string, key?: string): JSX.Element => (
-  <Flex key={key} w="$fill" flexDirection="column" alignItems="flex-end">
+  <Flex key={key} className={styles.assetInfo} w="$fill" flexDirection="column" alignItems="flex-end">
     <Text.Body.Normal weight="$medium" data-testid="asset-info-amount">
       {amount}
     </Text.Body.Normal>