fix(APP-3626): Fix VoteProposalDataListItem module component to trunc…

…ate long proposal IDs (#331)
aragon · Nov 5, 2024 · 7944a4d · 7944a4d
1 parent fdaceff
commit 7944a4d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   Update `ProposalVoting.Container` module component to make stages accordion controlled and support updating the
     current active stage programmatically
+-   Fix `VoteProposalDataListItem` module component to truncate long proposal IDs
 
 ### Changed
 

diff --git a/...aListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx b/...aListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx
@@ -15,9 +15,9 @@ const meta: Meta<typeof VoteProposalDataListItem.Structure> = {
 type Story = StoryObj<typeof VoteProposalDataListItem.Structure>;
 
 /**
- * Usage example of the VotesDataListItem module component for a token based vote.
+ * Usage example of the VoteDataListItem component.
  */
-export const TokenVoting: Story = {
+export const Default: Story = {
     args: {
         proposalId: 'PIP-06',
         proposalTitle: 'Introduction of Layer 2 Scaling Solutions',
@@ -29,25 +29,26 @@ export const TokenVoting: Story = {
 /**
  * Usage example of the VotesDataListItem module component with a custom label.
  */
-export const TokenVotingCustomLabel: Story = {
+export const CustomLabel: Story = {
     args: {
         proposalId: 'PIP-06',
-        proposalTitle: 'Introduction of Layer 2 Scaling Solutions',
-        voteIndicator: 'yes',
-        date: 1613984914000,
-        confirmationLabel: 'Custom label',
+        proposalTitle: 'Add Member to Council',
+        voteIndicator: 'no',
+        date: 1704961234000,
+        confirmationLabel: 'Selected',
     },
 };
 
 /**
- * Usage example of the VotesDataListItem module component for a multisig vote.
+ * Usage of the VoteProposalDataListItem component with long proposal IDs.
  */
-export const Multisig: Story = {
+export const LongProposalId: Story = {
     args: {
-        proposalId: 'PIP-06',
-        proposalTitle: 'Introduction of Layer 2 Scaling Solutions',
+        proposalId:
+            '0x7617b0ed30e178ca91d1de3ae8ec7552b0626c693b7f3b6e29a3c7a8383e88fe-0xad3c46774dC00a16248766E1a83F2B1E04d15C4A-73144785007199445908234261408001196016186536834058203434500863241524295589949',
+        proposalTitle: 'Funds Withdrawal',
         voteIndicator: 'approve',
-        date: 1613984914000,
+        date: 1730807735000,
     },
 };
 

diff --git a/...posalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx b/...posalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx
@@ -36,9 +36,9 @@ export const VoteProposalDataListItemStructure: React.FC<IVoteProposalDataListIt
             className={classNames('flex flex-col gap-x-3 gap-y-1 md:gap-x-4 md:gap-y-1.5 md:text-lg', className)}
             {...otherProps}
         >
-            <div className="flex items-center gap-x-1 text-base font-normal leading-tight md:gap-x-1.5 md:text-lg">
-                <p className="shrink-0 text-neutral-500">{proposalId}</p>
-                <p className="line-clamp-1 text-neutral-800">{proposalTitle}</p>
+            <div className="flex w-full min-w-0 items-center gap-x-1 text-base font-normal leading-tight md:gap-x-1.5 md:text-lg">
+                <p className="max-w-full shrink-0 truncate text-neutral-500">{proposalId}</p>
+                <p className="truncate text-neutral-800">{proposalTitle}</p>
             </div>
             <div className="flex items-center gap-x-1 text-sm font-normal leading-tight text-neutral-500 md:gap-x-1.5 md:text-base">
                 <span>{confirmationLabel ?? copy.voteProposalDataListItemStructure.voted}</span>