[Design QA]: Tighten up the Tables

mentioned requirements for table design are implemented in the version 9.4 to 10.1 attached a screenshot.
as per requirements looks good for RTBC.
3180282-design-issue.png

#8 is incorrect. The issue reported is still happening. As stated in the issue summary, the problem occurs when enough items/scrollling is present for the header to be sticky. The screenshot is of a table that is not engaging a sticky header.

This issue still exists in D10. I have attached a patch for same. Please review.

Tried to fix CCF.
Please review.

Applied patch #12 applied successfully in drupal-10.1.x-dev. We can move this ticket to RTBC.
All the above-mentioned issues are fixed now.
For ref sharing screenshots...

+++ b/core/themes/olivero/css/components/table.css
@@ -101,6 +101,18 @@
+.sticky-header th {
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  text-align: start;
+  letter-spacing: 0.02em;
+  color: var(--color-text-neutral-loud);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: var(--sp);
+}

Adding the .views-table class to the element with .sticky-header eliminates the need for all this additional CSS. Aside from being less to change, this has the added benefit of ensuring any change to the not-sticky header styles will automatically be applied to the sticky header as well. With this approach, theres a risk of changing th styles in one place and neglecting to make the corresponding change in the other.

Addressed #14, Attached patch for same. Please review

Fixed CCF for #15.

Verified the patch #16 and tested it on Drupal version 10.1.x. The patch works fine and I have added the before and after screen recordings for reference.

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request as a guide.

Can the issue summary be updated with the proposed solution. I see the points of the issue but what was decided to solve them?

Before/after screenshots of the issue would be useful as well.

index 4c60e6d517..d939d8d2f9 100644
--- a/core/misc/tableheader.js

--- a/core/misc/tableheader.js
+++ b/core/misc/tableheader.js

+++ b/core/misc/tableheader.js
@@ -211,7 +211,9 @@

@@ -211,7 +211,9 @@
         // Clone the table header so it inherits original jQuery properties.
         const $stickyHeader = this.$originalHeader.clone(true);
         // Hide the table to avoid a flash of the header clone upon page load.
-        this.$stickyTable = $('<table class="sticky-header"></table>')
+        this.$stickyTable = $(
+          '<table class="sticky-header views-table"></table>',
+        )
           .css({
             visibility: 'hidden',
             position: 'fixed',

This is a change to core code, so it would impact all themes. There would need to be testing with all core themes to confirm this doesn't introduce problems.

Another option is to implement this in a manner specific to Olivero. One option is to override TableHeader.prototype.createSticky. The safest way is to probably invoke the original then add the class to this.$stickyTable. There are likely other options but that is one that comes to mind.

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.