Feature/stick viz searchbar header - #78
Conversation
…crolling The column titles scrolled away with the rows because the sticky <th> had no bounded scroll container to anchor to, and when a search bar was present it and the titles fought over the top slot. Give each header row its own sticky position and bound the table height so the header stays put in both the query view and the edit dialog. - Pin th.table-visualization-search to top:0 so the search bar forms a stable first header row instead of scrolling off. - Keep column titles sticky at top:0 by default so that with no search bar (single header row) they sit flush and nothing scrolls above them. - Offset the titles by the 50px search-row height only when the search bar is present, since they are then the second header row. - In the edit dialog, bound .ant-table height so the table itself becomes the scroll container (the sticky <th>'s nearest scrolling ancestor), mirroring the .query-fixed-layout block that already works. - Keep the intermediate antd wrappers overflow:visible so a clipping wrapper doesn't break the sticky anchoring
The previous change pinned the header in the edit dialog but not in the query view: there the table grew to its full content height and the outer tab pane did the scrolling, so the sticky <th> anchored to a table that was itself sliding up the page and the header scrolled out of sight. Make the table its own bounded scroll container so the header has a stable box to stick to, mirroring the edit-dialog fix. - Set height:100% on .table-fixed-header, .ant-spin-nested-loading and .ant-spin-container so the height flows down from the absolute container to .ant-table; without a resolved height chain, flex-grow has nothing to bound against and the table sizes to its content instead. - Give .ant-table overflow:auto so the rows scroll inside the table rather than in the outer tab pane, keeping the sticky header pinned to the table. - Keep .ant-table-container and .ant-table-content overflow:visible so neither wrapper becomes a nested scroll box between the <th> and .ant-table, which would re-anchor the sticky header and break it again.
|
@aschullermetr please take a look here. We can see the table scroll behind the search bar a bit but I dont mind so much as now column header and search are fixed. @imenattatra if we deploy this, will it automatically impact all widgets having a search for all clients ? |
yes @helenalebreton , it will impact all widgets having table visualisations with a search for all clients |
looks nice, the functionality is there! regarding the scrolling: it looks like there is a transparent field between the columns and the searchbar - not sure how (or even IF) this affects the user experience at all |
|
@aschullermetr yes but consider my and your client feedback I beliwe the seethrough is lesser problem than the searchbar disappearing |
yes, for sure |
berinhard
left a comment
berinhard
left a comment
There was a problem hiding this comment.
This is me reviewing CSS code:
Thanks for adding the screenshots, they are the evidences I need to apply this PR.
PS: I hope to not offend nobody with my GIF joke. Anyways, I'm allowed to joke with blindness as I'm partially blind from one eye 😎
5 participants
Closes https://github.com/metr-systems/backlog/issues/4952
AI Disclaimer: I used Claude Opus extensively to help implement this change, as CSS is not my strongest area, although I’m comfortable working with it. I reviewed and validated the final result.
Summary
Here we make the table visualization's header (search bar + column titles) stay frozen at the top while we scroll, and this everywhere the table appears
Code Strategy
The whole strategy is to simply: force the table itself to be the scroll container, then let the header stick to it.
QA
Manually on staging, you can check the query here https://dashboard.staging.metr.systems/staging/queries/111 and you can see it used in a widget in this dashboard https://dashboard.staging.metr.systems/staging/dashboards/71-test-asdas
How it appears? (screenshots from staging)