fix: update UserHub transactions to have correct styles for 720-768px screen

[Nortsova]

Description

For 720-768px error message was broken:

I really hope that my fix will not break anything else, but all I tested now works 😄

Testing

• Step 1. Login with MetaMask
• Step 2. Create Simple payment motion
• Step 3. Reject transaction
• Step 4. Open UserHub -> Transactions and ensure that all screens looks good

Resolves #3056

[iamsamgibbs]

This fixes transactions with long error messages:

But short ones are aligned centre:

And it breaks notification banners in a bunch of places unfortunately:

The notification banner is used in a bunch of different places so you'll have to be careful with the changes here:

I found the original PR where this change was made #1381 so the reasoning for it is a bit clearer.

[rumzledz]

This is just a humble suggestion @Nortsova -- to save you the hassle since this seemingly affects other areas where we use this NotificationBanner component, maybe you can add a prop for this component and adjust these styles specifically for the GroupedTransactionContent, which contains this problematic NotificationBanner version

And because we know your style changes are definitely fixing the issue, we can try:

<div
  className={clsx(
    'flex flex-1 flex-col items-start gap-2 @[600px]/notificationBanner:flex-row @[600px]/notificationBanner:items-center',
    contentClassName,
  )}
>

Then in GroupedTransactionContent:

<NotificationBanner
  ...existingProps
  contentClassName="@[600px]/notificationBanner:flex-col" // <<-- Add me 😄 
>

[rumzledz]

Then later down the line, maybe we can start thinking about whether it's worth refactoring component entirely

[Nortsova]

Thank you @rumzledz , I decided to go with this approach. 🙌

After some investigation, I realized that this issue arises because:

1. There's a rule for a container width of 600px (only for 720-768px does the container width become larger).
2. In UserHub, we have a callToAction prop containing two buttons that attempt to fill the full width.

An alternative solution I considered is to remove the callToAction from the component entirely.
And instead of this:

<NotificationBanner
 ...existingProps
  callToAction={<Buttons />}
>

Do something like:

<NotificationBanner
 ...existingProps
>
   {....content}
   <Buttons>
</NotificationBanner>

but this case requires me to fix a lot of styles.

[Nortsova]

Thank you, @iamsamgibbs and @rumzledz, for reviewing! It’s crucial to update this component without impacting other areas where it’s used. 🙌

[rumzledz]

Retested and all good on my side @Nortsova ✨

[iamsamgibbs]

Nice job fixing this up, all looks good now!

I agree with you that this should probably be refactored at some point so the content / call to action can just be composed in which would give us more flexibility, but appreciate that would be a much bigger change and this works well for now.

[rdig]

All good now.

Screencast.from.2024-10-29.18-25-46.mp4