Several images in one message wrap in a flex row with a 4px gap (.media-row, app.css:2724-2729); Discord and Element lay them out as a 2/3-column grid.
Spoiler attachments aren't blurred: there's no spoiler handling in MediaEmbed.tsx (only text spoilers). Discord blurs SPOILER_ files until clicked.
Fix: a media grid; blur SPOILER_/spoiler-flagged media until clicked.
Part of the v1.0 UI pass.
- Several images in one message wrap in a flex row with a 4px gap (`.media-row`, app.css:2724-2729); Discord and Element lay them out as a 2/3-column grid.
- Spoiler attachments aren't blurred: there's no spoiler handling in `MediaEmbed.tsx` (only text spoilers). Discord blurs `SPOILER_` files until clicked.
**Fix:** a media grid; blur `SPOILER_`/spoiler-flagged media until clicked.
_Part of the v1.0 UI pass._
Salastil
added this to the v1.0 milestone 2026-10-07 20:43:14 -04:00
Pictures that arrive together are now laid out together, and spoilers are hidden until asked for.
Media grid: two or more images/videos in one message form one block no wider than a single picture - two side by side, three with the first tall on the left, four in a square, five or more in rows of three. Cells crop to fit (object-fit: cover) and a click opens the viewer on that one, with the arrows reaching the rest. A single picture, and files that aren't pictures, keep the old row. Bubbles and the pending-dimming rules cover the grid too.
Spoilers: an attachment named SPOILER_… (Discord's own convention - and what the tray now sends, #308) is blurred behind a SPOILER pill, in the grid or alone, images and videos alike. The click that reveals it is only that: it doesn't also open the viewer. The marker is dropped from the name shown in the viewer.
Found while doing this: the gallery's scope selector (#312) named a class that doesn't exist (.message-list - the log is .messagelist), so it silently fell back to the whole page; fixed, and it now also stops the thread pane's media from mixing with the log's.
Behaviour checked in the app: one spoiler covered, click reveals without opening the viewer, then opens normally with the plain name.
Grid, before (left), after (right) - the first image is a message of two, the second of three with a spoiler as the last:
Four pictures, and a lone spoiler - before (left), after (right):
Finished: [87ea3b8](https://git.salastil.com/Salastil/moho/commit/87ea3b8c311fdccf3d81f916f09d11b11bd24618).
Pictures that arrive together are now laid out together, and spoilers are hidden until asked for.
- **Media grid:** two or more images/videos in one message form one block no wider than a single picture - two side by side, three with the first tall on the left, four in a square, five or more in rows of three. Cells crop to fit (`object-fit: cover`) and a click opens the viewer on that one, with the arrows reaching the rest. A single picture, and files that aren't pictures, keep the old row. Bubbles and the pending-dimming rules cover the grid too.
- **Spoilers:** an attachment named `SPOILER_…` (Discord's own convention - and what the tray now sends, #308) is blurred behind a SPOILER pill, in the grid or alone, images and videos alike. The click that reveals it is only that: it doesn't also open the viewer. The marker is dropped from the name shown in the viewer.
- Found while doing this: the gallery's scope selector (#312) named a class that doesn't exist (`.message-list` - the log is `.messagelist`), so it silently fell back to the whole page; fixed, and it now also stops the thread pane's media from mixing with the log's.
- Behaviour checked in the app: one spoiler covered, click reveals without opening the viewer, then opens normally with the plain name.
Grid, before (left), after (right) - the first image is a message of two, the second of three with a spoiler as the last:
Four pictures, and a lone spoiler - before (left), after (right):
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
.media-row, app.css:2724-2729); Discord and Element lay them out as a 2/3-column grid.MediaEmbed.tsx(only text spoilers). Discord blursSPOILER_files until clicked.Fix: a media grid; blur
SPOILER_/spoiler-flagged media until clicked.Part of the v1.0 UI pass.
Finished: 87ea3b8.
Pictures that arrive together are now laid out together, and spoilers are hidden until asked for.
object-fit: cover) and a click opens the viewer on that one, with the arrows reaching the rest. A single picture, and files that aren't pictures, keep the old row. Bubbles and the pending-dimming rules cover the grid too.SPOILER_…(Discord's own convention - and what the tray now sends, #308) is blurred behind a SPOILER pill, in the grid or alone, images and videos alike. The click that reveals it is only that: it doesn't also open the viewer. The marker is dropped from the name shown in the viewer..message-list- the log is.messagelist), so it silently fell back to the whole page; fixed, and it now also stops the thread pane's media from mixing with the log's.Grid, before (left), after (right) - the first image is a message of two, the second of three with a spoiler as the last:
Four pictures, and a lone spoiler - before (left), after (right):