Monica: Dashboard avatars of inconsistant size and shape

[scheidm]

Image avatars show up as an inconsistent size, depending on how many images v.s. initials are in the list of last consulted.

A list heavy with images looks ALMOST normal

A list with only 4 images is barely useful

A list containing only 3 reduces the images to useless slivers.

Note I am using the hosted version on https://app.monicahq.com

Thanks for listening!

[scheidm]

not knowing the stack very well, I did some monkeying in dev tools before digging into the code.
I moved 'Last Consulted' to before the flex container and added the following css rules:
.mw9 .flex.items-center { flex-wrap: wrap; }
.mw9 .pr2 { float: left; }

The result isn't perfect but looks passable at multiple sizes

I didn't see any break point references in the css, and I'm not sure how you all are handling reflow, but I took a quick stab at further cleanup, were there a breakpoint to work with:
.mw9 .pr2 { padding:0.25rem; }
.mw9 .w-70 { display: flex;
flex-direction: column;
width: 100%;
padding: 0.5rem; }

[djaiss]

Indeed. These look terrible. This will be completely fixed by https://github.com/monicahq/monica/pull/2112

Really sorry about this.

[pqhf5kd]

It looks like this was fixed by #2374. Can it be closed? Or are you waiting on #2112?