Fix Embed table full scroll

[taiebot]

• Fix remove sticky and scroll everything

Widget is too small to let headers stick so let headers scroll, this as well solves issue with overlay on the headers by simplifying the logic. The only issue is the three dots on the right but they are accessible if the user goes back to the top of the table

• Fix issue Embedded tables some column overflow on header #2596

---

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

• ⛑️ Tests (unit and/or integration) are included or not needed
• 🔙 Backport requests are created or not needed: /backport to stableX.X
• 📅 Milestone is set
• 🌸 PR title is meaningful (if it should be in the changelog: is it meaningful to users?)

🤖 AI (if applicable)

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

[enjeck]

In the "after" screenshot, I don't see the title?

[taiebot]

It's by design. The widget is so small that it does not make sense to keep the headers in view. I can only see one row by moving up the headers. With this design decision i can see more rows (3) . As long as the widget is not increased in size i would recommend this solution. This is simpler as well with overlay behaviour inside the widget.

You can test the feeling by putting in the dev console this code when an embeddded table is loadded => for designers to see. It is not at all off putting and look more natural with such a small view.

document.querySelector('.tables-content-widget .header').style.zIndex = 10;
document.querySelector('.tables-content-widget .header').style.position = 'relative';

document.querySelectorAll('.tables-content-widget thead').forEach(el => {
  el.style.position = 'static';
  el.style.zIndex = 5;
});

[enjeck]

Not sure how to reproduce the issue since without these changes, it renders for me well. Here, I'm embedding within Notes:

Plus, the before and after are of different tables, so doesn't appropriately reflect the fix. I also don't agree with removing the header

[taiebot]

Wait you do not see the stars in the headers when you scroll inside the table ? Did you try to reduce your window ? i have a small screen. I will suggest a new pull request to fix the scrolling but i will leave this one open because i would prefer when i scroll to see more of the table content. I believe this is more of a design issue.

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)