-
Notifications
You must be signed in to change notification settings - Fork 43
[PAY-1660] Fix layout issues with TrackTile socials row with a lot of stats #3815
Conversation
Preview this change https://demo.audius.co/pay-1660-fix-stats-overlap |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah yeah that looks better 😁
I see that the reposts and favorites are granted different amounts of space. Is that by design? Maybe can fix the flex grow ratio somehow? |
I noticed this as well. The flex behavior is inside the |
@@ -254,9 +254,15 @@ | |||
margin-right: var(--unit-20); | |||
} | |||
|
|||
.small .bottomRight { | |||
/* Match socialsRow to keep these in line */ | |||
height: 18px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
var?
[5e99303] Add favorite test and fix aria-label (#3817) Raymond Jacobson [ccc32ce] [C-2908 C-2744] fix desktop follow button (#3816) Dylan Jeffers [c0679c3] [PAY-1660] Fix layout issues with TrackTile socials row with a lot of stats (#3815) Randy Schott [089a9e6] Pin stripe package versions (#3813) Reed [a281267] [C-2774] Update upload inputs (#3806) Dylan Jeffers [f504ef9] [C-2901] Fix menu types (#3811) Dylan Jeffers [cb9a385] [C-2905] Update Text types and props to camelCase (#3810) Kyle Shanks [027b3a5] [PAY-1624] Implement Purchase modal (#3808) Randy Schott [deadb5f] [C-2902] Update the upload forms to use the typography component (#3809) Kyle Shanks [039c951] [C-801] Fix oauth nodes (#3807) Raymond Jacobson [c3765c7] Update typography component to use classnames (#3805) Kyle Shanks [cab0a3e] Switch to Stripe package instead of script (#3798) Reed [a84126f] [C-2890] Add first version of a typography component to web (#3796) Kyle Shanks [4addddc] Fix mobile prem-content drawer unlocking margin (#3804) Reed [233b585] [C-2857] Remove get blocknumber (#3802) Dylan Jeffers [d113bdb] Prepare for 1.5.34 full app release (#3801) Dylan Jeffers [2f09db4] [C-2887] Fix collection button widths (#3800) Dylan Jeffers [8158e10] [PAY-1655] Add ColorValue prop to Text component (#3799) Reed [fe4bc6a] Revert cacheActions.add thunk (#3797) Dylan Jeffers [2370bbe] [PAY-1650] Update play/preview buttons on track details to use HarmonyButton (#3795) Randy Schott [3579dc2] [PAY-1651] Implements Harmony Buttons (#3794) Randy Schott [5af77ec] [C-2886] Improve cache performance (#3792) Dylan Jeffers [6fb78f1] [PAY-1587] Mobile USDC Purchase Drawer Skeleton (#3793) Reed [1277a41] [C-2883] Migrate confirmer to common (#3788) Dylan Jeffers [ce2548e] [plat-1111] add usdc purchase seller and buyer notifications (#3770) sabrina-kiam [bc04f52] Fix mobile LockedStatusBadge padding (#3790) Reed [8943078] [C-2680] Attribution Modal (#3778) Andrew Mendelsohn
Description
The stats row gets large if you happen to be following multiple people which reposted and favorited a track. The styling for the socials row includes a margin to make space for the plays. But it wasn't set up to restrict its content to the available space.
Also for small track tiles, we change the height of the row to 18px, which causes the plays count to be off-center since it is rendered absolutely. There is longer term cleanup needed on the socials row so that the content isn't sized larger than its container and centered. But it wasn't a safe change to make due to the multiple places we use the
Stats
component. This fixes the display issues for now, and we will address it more fully later.Dragons
N/A
How Has This Been Tested?
Verified locally on Chrome
How will this change be monitored?
N/A
Feature Flags
N/A
Screenshots
Before
After