fix(chat): limit multiple file message to a single row

[Antreesy]

☑️ Resolves

• Follow-up to feat(chat): combine file shares into a single message in UI #18989
• Fix Group multiple images in one message - collage / canvas / grid layout #19017
  • Limit amount of space taken by combined files messages to one scrollabe row
  • Alternative is to introduce complex logic to show '3 more files' button, open some dialog or expand message on click, and track amount of fitting files with JS

AI (if applicable)

• The content of this PR was partly or fully generated using AI

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before	🏡 After
Screenshot before	Screenshot after

🏁 Checklist

• 🌏 Tested with different browsers / clients:
  • Chromium (Chrome / Edge / Opera / Brave)
  • Firefox
  • Safari
  • Talk Desktop
  • Integrations with Files sidebar and other apps
  • Not risky to browser differences / client
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[nimishavijay]

since we try to avoid horizontal scrolling in other places in NC, I'm wondering if we can find a way to minimize the empty space... maybe we can do a mosaic grid/masonry here too? It would look okay for images but sure about files.

Also thinking about showing files differently, to give more importance to the file name instead of the thumbnail, sort of like attachments in Mail, what do you think?

[Antreesy]

maybe we can do a mosaic grid/masonry here too? It would look okay for images but sure about files.
Also thinking about showing files differently, to give more importance to the file name instead of the thumbnail, sort of like attachments in Mail, what do you think?

In general we can split showing images in first row as a grid/masonry, and files - below with a similar styling. My issue with that is - Mail uses it in a composer area, contrary to Talk, where it's the final appearance of the content

[bentuna]

I also think that splitting things up for images (masonry, first image 2x2, others 1x1) and below the other files in a list view (1 or two coloumns of files in a compact list) is a good idea.

[bentuna]

FYI: Google Chat is very disappointing here and just doesn't let you upload certain file types together:

[Antreesy]

FYI @nimishavijay implementing a wrapper component for files here #19020 to allow better experience. So don't hold back with ideas and mockups =)