this repo has no description
Handle media > 2 taking a lot of vertical space
Also handle media > 4, which I think some instances probably allow
+15
-1
+10
src/components/status.css
+10
src/components/status.css
···
277
277
gap: 2px;
278
278
flex-direction: row;
279
279
}
280
+
.status:not(.large) .media-container.media-gt4 {
281
+
flex-wrap: nowrap;
282
+
overflow: auto;
283
+
}
280
284
.status .media {
281
285
flex-grow: 1;
282
286
flex-basis: calc(50% - 8px);
···
285
289
max-height: 160px;
286
290
min-height: 80px;
287
291
border: 1px solid var(--outline-color);
292
+
}
293
+
.status .media-container.media-gt2 .media {
294
+
aspect-ratio: 1 / 1;
295
+
}
296
+
.status:not(.large) .media-container.media-gt4 .media {
297
+
min-width: 80px;
288
298
}
289
299
.status .media:hover {
290
300
border-color: var(--outline-hover-color);
+5
-1
src/components/status.jsx
+5
-1
src/components/status.jsx
···
406
406
</button>
407
407
)}
408
408
{!!mediaAttachments.length && (
409
-
<div class="media-container">
409
+
<div
410
+
class={`media-container ${
411
+
mediaAttachments.length > 2 ? 'media-gt2' : ''
412
+
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
413
+
>
410
414
{mediaAttachments.map((media, i) => (
411
415
<Media
412
416
media={media}