fix(widgets): show description even on smaller embeds

[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

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 54.06%. Comparing base (f54323d) to head (0a34681).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/NcRichText/NcReferenceWidget.vue	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8545   +/-   ##
=======================================
  Coverage   54.06%   54.06%           
=======================================
  Files         106      106           
  Lines        3479     3479           
  Branches     1008     1009    +1     
=======================================
  Hits         1881     1881           
  Misses       1354     1354           
  Partials      244      244           

☔ View full report in Codecov by Harness.
📢 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%)).

[Antreesy]

Thanks!
I would still like to have a CSS change, otherwise &--details with name, description, other text are still limited to 60% if image is missing

[tyzbit]

What CSS change are you referring to and where should it go? Sorry if already discussed. Is that the min-width: min(200px, 100%)) you mention?

[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;
}

[tyzbit]

Ah, I added that change to this PR. Can you check?

[Antreesy]

Looks good, updated screenshots in the main description!

[Antreesy]

Please rebase onto latest main branch and squash commits. Otherwise looks good to me!

[tyzbit]

Rebased, commits squashed, title updated

[tyzbit]

Rebased again so workflows need approval again.

[Antreesy]

You don't have to rebase, if it says that branch is outdated (unless there are conflicts)
We're waiting for a second review currently