fix: broken loading in Transactions in UserHub + fixed text overflow in pills #2725
Conversation
|
|
| @@ -111,7 +111,7 @@ const UserHub: FC<UserHubProps> = ({ | |||
| </> | |||
| )} | |||
| </div> | |||
| <div className={clsx('relative h-full w-full')}> | |||
| <div className="relative h-full w-full min-w-0"> | |||
There was a problem hiding this comment.
min-w-0 and max-w-full classes added for different elements to make text-overflow: ellipsis on pills actually works
| <span className="min-w-0 truncate">{status.toLowerCase()}</span> | ||
| {pending && ( | ||
| <SpinnerGap | ||
| className="flex-grow-1 ml-1 inline-block h-[0.8125rem] w-[0.8125rem] flex-shrink-0 animate-spin text-blue-400" |
There was a problem hiding this comment.
I'm not sure flex-grow-1 inline-block flex-shrink-0 is needed here.
| > | ||
| {status.toLowerCase()} | ||
| <span className="min-w-0 truncate">{status.toLowerCase()}</span> |
There was a problem hiding this comment.
Not sure min-w-0 is needed.
| 'bg-negative-100 text-negative-400': failed, | ||
| 'bg-gray-100 text-gray-500': !succeeded && !failed, | ||
| }, | ||
| 'min-w-0 max-w-full', |
There was a problem hiding this comment.
Not sure min-w-0 is needed.
There was a problem hiding this comment.
Hey @Nortsova great work on this PR! 🌻
Can I ask a minor request, can you change the loader icon that spins from blue-400 to the same gray as the pending text? This just keeps our pill designs consistent (where icons and text colours match).
Thanks!
|
Thank you @melyndav ! ✨ Here is the updated UI: 
|
There was a problem hiding this comment.
This looks good to me!
@melyndav Is this spinner here intended to be text-blue-400? I noticed the spinner colour here before so thought it was intentional to keep them consistent.
Hey @iamsamgibbs - it's intended to be blue to match the left side vertical line of this individual component. From Figma: 
|
Description
Testing
Diffs
New stuff ✨
Resolves #2520