DRAFT: fix(NcRichText): don't hide descriptions < 450px

[tyzbit]

☑️ Resolves

• Fix Hiding the description for width < 450 negatively impacts rendering in Talk #8524, only observed results in the usage of the Talk app only. Other consumers may see changed behavior with rich widgets that are < 450px.

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• ...

🏁 Checklist

• ⛑️ Tests are included or are not applicable (NA)
• 📘 Component documentation has been extended, updated or is not applicable (NA)
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.63%. Comparing base (d73eeaf) to head (95d5dea).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8545      +/-   ##
==========================================
+ Coverage   54.60%   54.63%   +0.03%     
==========================================
  Files         106      106              
  Lines        3443     3441       -2     
  Branches     1005     1004       -1     
==========================================
  Hits         1880     1880              
+ Misses       1322     1321       -1     
+ Partials      241      240       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ShGKme]

Hi Tyler, and my special greetings to a Vivaldi user. Thanks for your contribution.

Though this change fixes the problem for Talk, it does so by removing a feature rather than the root cause.

We definitely can improve the reference widget rendering, for example:

• Remove 40% empty space preserved for an image that doesn't exist
• Play around the sizes to show more data on a narrow block

But the problem comes from the width determination here...

In Talk, the bubble message tries to be as small as possible (fit-content). In case of the link - it is the link width itself. Then the reference widget tries to fit in the bubble, stretching it if necessary.

When there is an image OR the link is long, initial width is wide enough to stretch the bubble. Widget is wide and it renders the long description.

When there is no image, it fits the narrow bubble. It stays narrow, and widget content tries to fit in.

Narrow message bubble --> narrow widget block --> minimal fitting content

Instead of fitting into a narrow bubble, the widget should have stretched it.

IMO, we may have to solutions here:

1. On the Talk side, if there is a reference in the message, always render it wide to provide as much space to the widget as possible
2. On the library side, before checking the widget width and narrowing down, try to take as much space as possible. So that the widget stretches the bubble.

[ShGKme]

@Antreesy What do you think?

[tyzbit]

@ShGKme Thank you for taking the time to provide that informed analysis and info. I have converted this PR to a draft since more discussion will probably produce a better fix.

I like the solutions you proposed. I would like to ponder if they would behave in the best manner in these scenarios:

1. In Talk (out of scope for this PR, but as a consumer of this library), messages can be in bubbles on alternating sides or completely left-justified. If the widget takes up as much space as possible, would it be a good user experience for the widget to span the entire message content viewport? If not, Talk can limit individual message width to 75% (as an example) of the viewport in case of the alternating-sides view, right-justified, or do something similar if it doesn't already.
2. In this library, taking up as much space as possible would provide the most content in the preview but then we are no longer considering the length of the description in the calculation - maybe cases where the description is only a few words might result in extra-wide widgets with empty space.

[Antreesy]

Remove 40% empty space preserved for an image that doesn't exist

This change works for me to allow take the space without an image and keep an ellipsis:

&--details {
-	width: 60%;
+	width: 0;
+ 	flex-grow: 1;
}

Play around the sizes to show more data on a narrow block

If we're working with hardcoded values, I would just decrease the lower border. 250px is approx. the width of the widget in the Talk during the call (in the narrow chat in sidebar)

-	const lineCountOffsets = [450, 550, 650, Infinity]
+	const lineCountOffsets = [250, 550, 650, Infinity]

With no image and no 60% limit there's plenty space to render a description. Even with a small thumbnail, something still fits

Another thing I discovered, that there is a --compact styles in the widget, that have been commited, but never used 🙈
nextcloud-libraries/vue-richtext@831fba7

On the Talk side, if there is a reference in the message, always render it wide to provide as much space to the widget as possible
On the library side, before checking the widget width and narrowing down, try to take as much space as possible. So that the widget stretches the bubble.

Talk is limit max width to ~80-90%. But I wouldn't span a widget at all.
Important here is a message text that should fit fully. After all, widget is still a decoration (although I agree it should take at least some minimal width to be readable. e.g. min-width: min(200px, 100%)).