{{ message }}
centre lobby sort-column values and stop sort-triangle shift#20271
Draft
CZapin2015 wants to merge 1 commit intolichess-org:masterfrom
Draft
centre lobby sort-column values and stop sort-triangle shift#20271CZapin2015 wants to merge 1 commit intolichess-org:masterfrom
CZapin2015 wants to merge 1 commit intolichess-org:masterfrom
Conversation
Closes lichess-org#18744. The sort triangle was only rendered in the active sortable column, so clicking Rating vs Time shifted the triangle between columns and reflowed both the headers and the values below them. Keep the triangle in the DOM on every sortable header and toggle it via opacity so column widths stay stable on sort change. Centre sortable headers and their matching cells so values sit under the header text. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Collaborator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #18744.
Problem
The sort triangle (▼) is only rendered inside the currently-active sortable column header. Clicking Rating vs Time moves the triangle between columns, reflowing:
Result: clicking a different sort option makes the whole table shift horizontally.
Fix
ui/lobby/css/app/_hook-list.scss:opacityinstead of swappingcontent. Column widths stay identical regardless of which column is currently the sort.:has(th.sortable) td:nth-child(2|3)) so values sit under the header text instead of left-aligning against the triangle.No markup change. Only affects the lobby's realtime hook list.
Testing
Verified locally against lila-docker running my branch. Clicked between Rating and Time repeatedly:
getBoundingClientRect)Screen recording attached below.
AI disclosure
Parts of this change were drafted with help from Claude (Anthropic). Prompt intent: find why the lobby columns shift on sort change (
_hook-list.scss), reserve the triangle's space on all sortable headers, and centre sort-column data so values sit under the header text. All code reviewed by me and verified locally.