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