Sticky table headers on universal listings

[yhaooo11]

Makes table headers sticky for tables with the full-width class.

This should implement the enhancement for the issue #11705

[squash-labs]

Manage this branch in Squash

Test this branch here: https://yhaooo11enhancement11705-stick-o07cy.squash.io

[lb-]

@thibaudcolas or @laymonage - when possible, it might be good for you to look at this.

I will try to do a review in the coming week or so but pinging as you may have thoughts.

Thank you @yhaooo11 for preparing this PR

[lb-]

Just a few suggestions from a code variable usage perspective.

[lb-]

I have not run this code locally yet but in general we should avoid hard-coded values and instead use variables.

We use this 70px in lots of places, not sure on the best location for this variable but maybe we should add to client/tailwind.config.js.

      addBase({
        /** Support for web components */
        ':root, :host': {
          '--w-font-sans': fontFamily.sans.join(', '),
          '--w-font-mono': fontFamily.mono.join(', '),
          '--w-density-factor': '1',
++          '--w-header-height': '4.375rem', // 70px

Then we can update as below.

Suggested change

	thead {
	position: sticky;
	top: 140px;
	@include media-breakpoint-up(sm) {
	top: 70px;
	}
	background-color: theme('colors.surface-page');
	z-index: 3;
	}
	thead {
	position: sticky;
	top: calc(var(--w-header-height) * 2);
	@include media-breakpoint-up(sm) {
	top: var(--w-header-height);
	}
	background-color: theme('colors.surface-page');
	z-index: calc(theme('zIndex.header') - 20); // not sure on this but start here and see what works
	}