Spent some time revisiting this. Not sure now whether to implement it at all frankly.

After initially trying to arrange it as suggested by @marcusxms suggested I gave up trying to do it with flex or grid and ultimately I still wound up never knowing if an element would end up on the right or left to adjust the pop-over positioning. Part of this is because the containers exist whether they have anything in them or not and even :empty pseudo-class wasn't helping. I ended up just using old-school floats, because then I could at least be assured the Event responses would always be to the right to adjust the pop-over positioning. The downside is that the attendence counts are in the reverse order of the buttons because of float: right;:

It was also problematic to put the "Reactions and Reshares" and "Attendance" labels because all the engagement counts are in a single .wall-item-responses container, and that isn't the only place that class name is used.

But I don't think this floated horizontal list will work on mobile really at all. It looks pretty messy if you keep the one set of responses floated left and the other still float right:

Which still does not fix the issue with the pop-over not having enough room and potentially breaking the mobile layout if the expanding element is positioned too far to the right, with no way of knowing if that particular button is ever toward the left or right:

Because you never know how many of these responses will be populated. That "Reshares" button might be the only one, in which case it's to the left, or there may be "Likes" and "Dislikes" (as shown here) that push it too far to the right to properly display its pop-over.

I can't use :nth-of-type() or anything to target containers too far to the right because they collapse and even if I use the :empty pseudo-class to display: none; the ones with nothing in them they still exist regarding the count. I'd have to add checks for empty siblings for every possible combination of any, some, or all of the containers being populated or unpopulated. Oh, and there's a hidden, unused ".wall-item-comment" container in there too to deal with.

But, simply shifting this list back to a vertical one on mobile looks even worse than how it currently looks because it creates even MORE blank space to the right of the list:

So if I have to leave things as they are for the mobile layout is there any real advantage to changing to the horizontal layout for the desktop layout?

Another factor is that there is no way of ever knowing how many characters the actual count will be on any one of these response items. I looked at the Friendica code and there does not appear to be any limitation. The ONLY limitation appears to be on the pop-over list, where it is limited to showing 75 entries total (actually 74 + "and xxxx more" text).

Granted, I've never seen more than thousands of reshares on any post and that was something from a celebrity account on Mastodon, but there also doesn't appear to be anything in Friendica's code to truncate the number if it is large. For example on Facebook if it's 1,280 Likes it will truncate it to "1.2K" or if it's 26,568 Shares it will be truncate it to "26K" - there doesn't appear to be anything in Friendica's code to do that. Probably because that level of engagement is generally unlikely in the Fediverse, but still there is no way to know if the engagement count on any given response item will be one character or six or more.

This change may not be worth doing?

@noidea @heluecht @jrossstocholm @helpers

Well now I'm torn, because I could just do it more similarly to Facebook with a pop-over instead of an accordion/expanding block. Though I'm not sure if this is less clear what it is showing a list of? I mean you have to click the button to open/close it. But at least it doesn't push everything down below it.

#friendica #bookface @helpers @admins

Also, as part of this, would be a pretty big change to how the expanded tally lists look. They currently look like this (the "2 people reshared this" and "8 people attend" are expanded):

And this is how the expanded lists would look with my changes:

Regardless of the actual tally there is a hard limit, it will only show a maximum of 74 accounts in the expanded list. This is what that looks like:

Which looks pretty terrible IMO. And here's how that would look with my changes:

It's set to expand to show a maximum of 20 items before it adds an overflow scrollbar. Over on Facebook when you mouse over the tally for "Likes" (for example) it will show a pop-up list with up to 19 names and then add "and xxx more..." (for a max of 20 entries) so I coded mine to put "and others..." after the last entry (I can't actually get the number of additional entries not being shown to style it. It doesn't matter because it's rarely accurate to the total count on the button you click to expand the list anyway).

Over on Facebook if you click the tally number it opens a modal dialog that will show you a list of ALL the people. Friendica doesn't have a modal like that, which is why I just made the expanding list scroll to show you the max number of people it will show (which is 74 + the notice that there are more = 75 entries).

#friendica #bookface @helpers @admins