[#73474] Make Inbox - Sprints divider full height

[myabc]

Ticket

https://community.openproject.org/wp/73474
https://community.openproject.org/wp/73475

What are you trying to accomplish?

Make the vertical divider between the Inbox and Sprints columns extend to full height on the sprint planning page. Also begins groundwork for OP #73475.

Screenshots

What approach did you choose and why?

• height: 100% on .op-backlogs-page and .op-sprint-planning-container to establish the full height chain from #content-wrapper down to the flex columns
• align-items: stretch on the flex container so the border divider stretches to full height
• min-height: 0 + overflow-y: auto on children to allow independent column scrolling (standard flexbox shrink pattern)
• Moved overflow: hidden from children to the container
• Use extended-content--bottom mixin (scoped to .action-sprint_planning) to remove #content-body's bottom padding so the layout fills the viewport edge; inner padding restored via --stack-padding-normal on .op-sprint-planning-lists
• Moved the column divider border into a @container (min-width: 655px) query so it only appears when columns are side-by-side, avoiding a specificity conflict with the max-width: 654px stacking rule
• Changed divider selector from :first-child to :not(:last-child) for robustness

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)
• Verified drag-and-drop autoscroll still works within scrollable columns
• Verified height: 100% resolves correctly through the parent chain (divider reaches full height)
• Verified works responsively (needs OP #73477)

[Copilot]

Pull request overview

Adjusts Backlogs (sprint planning / inbox) layout styles to make the column divider span the full available height and to control overflow/scrolling within the lists.

Changes:

• Add flex container sizing/alignment rules to stretch the two-column layout vertically.
• Make backlog/sprint-planning list columns scrollable (overflow-y: auto) with min-height: 0 for proper flexbox overflow behavior.

[Copilot]

height: 100% on .op-backlogs-container, .op-sprint-planning-container likely won’t have any effect because the direct parent (.op-backlogs-page) doesn’t define a height, so the percentage resolves to auto. If the intent is to stretch the columns (and the divider border) to the available viewport/content area height, set the height on .op-backlogs-page (or another ancestor with a definite height) and let the container/list flex items fill that space.

[myabc]

@HDinger perhaps you can give this a preliminary review?

There are some things we need to check - I've added checklist items for them. It would probably also be good if OP #73477 is in so we can verify properly how this works with inline-size and the container queries / @dombesz

[myabc]

@HDinger as implemented, the divider still doesn't go full height - #content-body has a 10px bottom padding, and I'm not sure the best/cleanest way to work around that constraint.

[HDinger]

@HDinger as implemented, the divider still doesn't go full height - #content-body has a 10px bottom padding, and I'm not sure the best/cleanest way to work around that constraint.

I did not have the time yet to look at the PR but to answer that already: We have a mixin called extended-content--bottom for use cases like this. However, you then need to care manually that the inner content has some spacing to the bottom border..

[HDinger]

The changes look good. Just the bottom spacing we already talked about is missing 👍

[HDinger]

Given that one the tickets is a feature, either the target branch or the ticket type needs to be adapted..

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

[Copilot]

Switching from overflow: hidden to overflow-y: auto on the list columns means horizontal overflow is no longer clipped at the column level. Long/unbroken content can now bleed into the gap/adjacent column. Consider also constraining horizontal overflow (e.g., keep overflow-x: hidden or otherwise ensure wide content can’t visually overlap neighboring columns) while retaining vertical scrolling.

Suggested change

	overflow-y: auto
	overflow-y: auto
	overflow-x: hidden