[#73474] Make Inbox - Sprints divider full height

This also begins the work needed for OP #73475.

https://community.openproject.org/wp/73474
https://community.openproject.org/wp/73475
This commit is contained in:
Alexander Brandon Coles
2026-03-26 19:01:12 +00:00
parent 52d5c95046
commit fc6a4fc195
2 changed files with 20 additions and 6 deletions
@@ -37,6 +37,7 @@
@import "../../../global_styles/openproject/_variable_defaults.scss"
@import "../../../global_styles/openproject/_variables.sass"
@import "../../../global_styles/openproject/_mixins.sass"
@import global
@import global_print
@@ -29,6 +29,9 @@
$op-backlogs-header--points-min-width: 5rem
$op-backlogs-header--points-min-width-narrow: 2rem
.action-sprint_planning
@include extended-content--bottom
.op-backlogs-header
display: grid
grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width, max-content) auto
@@ -71,6 +74,7 @@ $op-backlogs-header--points-min-width-narrow: 2rem
.op-backlogs-page
display: block
height: 100%
container-name: backlogsListsContainer
container-type: inline-size
@@ -78,21 +82,23 @@ $op-backlogs-header--points-min-width-narrow: 2rem
display: flex
flex-direction: row
gap: var(--stack-gap-normal)
height: 100%
align-items: stretch
overflow: hidden
// Line that separates left side of sprint planning from right side of sprint planning
.op-sprint-planning-lists:first-child
border-right: 1px solid var(--borderColor-default)
padding-right: var(--stack-gap-normal)
.op-backlogs-lists, .op-sprint-planning-lists
display: flex
flex-direction: column
gap: var(--stack-gap-normal)
flex: 1 1 100%
overflow: hidden
min-height: 0
overflow-y: auto
overflow-x: hidden
.op-sprint-planning-lists
padding-top: var(--base-size-16)
padding-top: var(--stack-padding-normal)
padding-bottom: var(--stack-padding-normal)
//------------------ Header form responsive styling -----------------------
// Note: Using hardcoded values because Sass doesn't interpolate variables in
@@ -130,6 +136,12 @@ $op-backlogs-header--points-min-width-narrow: 2rem
margin-top: -6px
//------------------ Sprint planning divider (side-by-side only) ----
@container backlogsListsContainer (min-width: 655px)
.op-sprint-planning-lists:not(:last-child)
border-right: 1px solid var(--borderColor-default)
padding-right: var(--stack-gap-normal)
//------------------ Mobile responsive styling -----------------------
@container backlogsListsContainer (max-width: 654px)
.op-backlogs-header
@@ -143,3 +155,4 @@ $op-backlogs-header--points-min-width-narrow: 2rem
.op-backlogs-container, .op-sprint-planning-container
flex-direction: column