Fix events#show layout: CFP Stats chart overflow and broken column ordering#1126
Merged
Conversation
The chart container .stats used display: table, which expands to fit its content's intrinsic width instead of honoring width: 100%. The responsive Chart.js canvas and the table then fed each other's width on window resize, letting the chart grow out of its column and overlap the proposal guidelines text. Use display: block so the chart stays clamped to the column width. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
col-md-push-8 / col-md-pull-4 were removed in Bootstrap 4+, so under Bootstrap 5.3 they were no-ops, leaving the columns in source order (CFP status/stats left, guidelines right). Use order-md-* utilities to restore the intended layout: guidelines on the left, CFP status/stats sidebar on the right, while keeping the status box first in source order so it shows first when columns stack on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Two layout bugs on the public event page (events#show), both stemming from outdated CSS that didn't survive the Bootstrap 5 upgrade.
1. CFP Stats chart overflows into the guidelines text on resize
The "CFP Stats" line chart (Chartkick + Chart.js) is a responsive canvas that sizes itself to its parent's width. Its container .stats used display: table, and the CSS table-layout algorithm expands to fit content's intrinsic width instead of honoring width: 100%. On window resize this created a feedback loop — Chart.js drew a wider canvas, the table grew to fit it, Chart.js measured wider again — so the chart spilled out of its col-md-4 column and overlapped the proposal-guidelines text.
Fix: display: table → display: block on .stats, so the chart stays clamped to its column width. .stats is only ever used as this chart wrapper (the .stats .stat table-cell rules are dead — the styleguide uses #big_stats .stat), so nothing else is affected.
2. Dead Bootstrap 3 push/pull column classes
The two columns used col-md-push-8 / col-md-pull-4, which were removed in Bootstrap 4+. Under Bootstrap 5.3 they're no-ops, leaving the columns in raw source order (CFP status/stats on the left, guidelines on the right) instead of the intended layout.
Fix: Use order-md-* utilities to restore the intended layout — guidelines on the left, CFP status/stats sidebar on the
right — while keeping the status box first in t when columns stack on mobile.