I haven't been able to find a cross-browser solution to this:

• The easiest solution for getting an element to stretch to the height of its parent is using flexbox, but we can't set display: flex on any of the table elements
• We can't absolutely position the button - this only works if there's a non-sortable column that is as tall or taller than the sortable column(s). For the example on the demo page where all the columns are sortable, the buttons collapse (since their padding is ignored) and the thead layout breaks
• To set height: 100% on the button, its parent element must have a height. I haven't figured out a cross-browser way to set a height on some of the table elements. For example, I tried setting an arbitrary height on the tr (like 1px) which gets ignored, then height: 100% on both the th and sort button. This works in FF, but in Chrome you need height: inherit on the th instead.

I also don't want to do something hacky that could break with further variations in the thead. Instead, I think it might be best to decline this task and accept that the button will not be full-height if a column heading wraps to multiple lines. The button is still vertically centered and has a decent amount of vertical padding, so it doesn't look that bad.

@Sarai-WMDE what do you think?

Hey @AnneT. Thanks for the catch and for trying out the different approaches 🙏🏻

I gave it a go and the only way I could make the button stretch consistently across browsers is by applying height:100% to both said button and <table>, to ensure inheritance. It sounds extremely hacky, and I'm unsure of which consequences this can have (I could only try this using DevTools with the table With selection and sort example, so my tests are very limited). Do you think this is worth trying?

Change #1034548 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Table: Force sort buttons to be full-height

https://gerrit.wikimedia.org/r/1034548

@Sarai-WMDE that works at least in FF, Chrome, and Safari! I've opened a patch so we can do further testing and ask Volker if there's any risks here. Thanks for finding this!

Change #1034548 abandoned by Anne Tomasevich:

[design/codex@main] Table: Force sort buttons to be full-height

Reason:

Not worth the risk

https://gerrit.wikimedia.org/r/1034548

@Volker_E brought up some valid concerns in the patch. I have not thought of a way to handle this that is worth the risk, especially since the issue itself is not that bad, so I suggest we decline this task

Thanks, Anne! I saw the patch and Volker's comments. I still haven't been able to reproduce any of the potential stretching, overflow or unwanted scroll issues that could be caused by applying a 100% height to the <table> element.

This might be due either to the fact that said element is safe due to being wrapped by two other divs (which height will always be determined by the available content), or due to the fact that I'm only able to test this in a controlled layout environment (demo page and sandbox). I agree with the concerns and wouldn't want to compromise the robustness and adaptability of the table to different contexts, so I'm fine with discarding this approach and trying to find a different solution.