Repository navigation
fix(kanban): stop swimlane labels covering the first column (#2507) - #2508
Merged
Merged
Conversation
Between 769px and 1200px a media query widened the sticky label to 150px while its grid track stayed 120px, so it covered the first 30px of the first column at every scroll position. Drop the fixed widths so the label fills its track at all window sizes.
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
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.
Fixes #2507. Thanks to alentangzy-jpg for reporting it.
Cause
styles/bases-views.cssset.kanban-view__swimlane-row > :first-childto 150px under@media (max-width: 1200px)and 120px under@media (max-width: 768px). The rule dates from before the rows used a grid. Sinced0dd3ad37(first tagged in 4.1.0) the label column has been a fixed 120px grid track, so from 769px to 1200px the 150px label overflows its track. The label is sticky withz-index: 5, so it covers the first 30px of the first column in the header and every lane. Scrolling cannot reveal that strip.This depends on window width, not macOS or monitor orientation. It reproduces on Linux. The media query reads the viewport, so a narrow pane in a window over 1200px is not affected. The reporter's screenshots match: the label is 150px wide at 1080px and 120px at 1920px.
#2485, #2487 and the 4.16.0 collapsed-column work did not cause this. The 4.15.0 stylesheet shows the same overlap, and swimlane header cells have no collapse control.
Fix
Remove both fixed widths so the label fills its grid track at every window size. The label column is now 120px throughout, and the padding and font-size rules in those media queries stay. Mobile layouts already set their own label width through
--kanban-swimlane-label-width.Tests
e2e/issues/issue-2507-kanban-swimlane-first-column.spec.tschecks withelementFromPointthat the first column's left edge is not covered at 1200, 1080 and 769px. This spec fails on main.columnWidth: 280and a formula swimlane:rpnpmrefuses this repo, which has nopnpm-lock.yaml.