Browser compatibility section, browser row should be sticky

[vinzusama]

Hi everyone,

It's not something big, really, but I think it would be good that the browser row, inside the full browser compatibility table should be sticky.
In case of long (loooong) table correspondences, you rapidely find yourself with the hidden. So you have to either memorize the correspondig row of each browser, or to scroll to top than back to the line you were looking for.

See an exemple :

(https://developer.mozilla.org/en-US/docs/Web/CSS/length#browser_compatibility)

And since the browser's row is pretty big, it could be great to stick just the browser's icons on scroll, in my opinion.

[ferdnyc]

Agreed, it seems since December 2023 I've been using MDN with this userstyle applied (via the Stylus extension):

@-moz-document domain("developer.mozilla.org") {
  figure.table-container {
    overflow: visible;
  }
  table.bc-table {
    position: relative;
  }
  table.bc-table thead {
    position: sticky;
    top: 97px;
    z-index: 500;
    background-color: var(--background-primary);
  }
}

It's an immense help on pages like https://developer.mozilla.org/en-US/docs/Web/API/Element where the BC table is HUGE.

[ferdnyc]

I'd open a PR, but I'm having trouble tracking down which of @mdn's 121 repos contains the CSS for the site.

[ferdnyc]

Found it, it's in mdn/yari. There was a previous PR to do this (mdn/yari#5417) that was ultimately abandoned when it ran into problems. I'm planning to take a different approach, tho I can't promise that my proposal won't run into the same problems.

[ferdnyc]

Sorry, mdn/yari#5417 is the corresponding issue, the PR that previously attempted to fix it was mdn/yari#8541.

[ferdnyc]

And my just-submitted attempt is mdn/yari#11345.