[57341] Full height split screen

app/components/work_packages/details/tab_component.sass

@@ -13,4 +13,4 @@
     border-bottom: 1px solid var(--borderColor-muted)
 
     &:last-of-type
-      padding-right: 8px
+      padding-right: 10px

app/components/work_packages/split_view_component.sass

@@ -3,8 +3,7 @@
   width: 550px
   justify-content: space-around
   border-left: 1px solid var(--borderColor-muted)
-  border-top: 1px solid var(--borderColor-muted)
-  border-right: 1px solid var(--borderColor-muted)
 
-  border-top-left-radius: var(--borderRadius-medium)
-  border-top-right-radius: var(--borderRadius-medium)
+  @media screen and (max-width: $breakpoint-lg)
+    // Unfortunately, we have to enforce this style via !important as the resizer writes the width directly on the element as inline style
+    width: unset !important

frontend/src/global_styles/common/header/app-header.sass

@@ -12,7 +12,6 @@
   border-bottom-width: var(--header-border-bottom-width)
   border-bottom-color: var(--header-border-bottom-color)
   width: 100vw
-  padding: 0 $spot-spacing-0_25
 
   @media screen and (max-width: $breakpoint-sm)
     grid-template-columns: minmax(0, auto) auto 1fr

frontend/src/global_styles/layout/_base.sass

@@ -60,12 +60,12 @@
 
 // The content is structured as grid and should ideally look like this
 // --------------------------------------------------------
-// |                    content-header                   |
-// --------------------------------------------------------
+// |             content-header           |               |
+// ---------------------------------------|               |
 // |                                      |               |
 // |                                      |               |
 // |                                      |               |
-// |             content-body            |   content-     |
+// |             content-body             |   content-    |
 // |                                      |   bodyRight   |
 // |                                      |               |
 // |                                      |               |
@@ -74,7 +74,7 @@
 
 // This layout is designed to show the WP split screen on any rails page.
 // Because of that, there are three things to keep in mind
-//    1. The content-bodyRight is optional. If it is not shown, the content-body should fill the available space.
+//    1. The content-bodyRight is optional. If it is not shown, the content-body and content-header should fill the available space.
 //    2. The WP split screen requires a 100% layout, meaning that the content-bodyRight needs to be
 //       "glued" to the right side and the bottom of the screen without any additional paddings or margins.
 //    3. Not all pages already follow that desired structure. Older pages render all their content inside content-body.
@@ -84,15 +84,15 @@
 // Instead the children elements have to do that themselves depending on which elements are present
 
 $top-space: 10px
-$right-space: 20px
+$right-space: 16px
 $bottom-space: 10px
-$left-space: 20px
+$left-space: 16px
 
 #content
   display: grid
   grid-template-columns: 1fr auto
   grid-template-rows: auto 1fr
-  grid-template-areas: "header header" "body bodyRight"
+  grid-template-areas: "header bodyRight" "body bodyRight"
   padding: 0
   margin: 0
   width: 100%
@@ -114,6 +114,7 @@ $left-space: 20px
 #content-body
   grid-area: body
   padding-bottom: $bottom-space
+  padding-right: $right-space
   padding-left: $left-space
   // Limit the width of the body to the container around it
   overflow-x: hidden
@@ -130,7 +131,7 @@ $left-space: 20px
 
 #content-bodyRight
   grid-area: bodyRight
-  padding: 0 $right-space 0 0
+  padding: 0
   overflow: auto
   @include styled-scroll-bar
 

frontend/src/global_styles/layout/_base_mobile.sass

@@ -66,9 +66,6 @@
     padding-left: 15px
     padding-right: 15px
 
-  #content-bodyRight
-    display: none
-
   #main
     grid-template-columns: auto
 
@@ -87,6 +84,14 @@
   .hidden-for-tablet
     display: none !important
 
+@media screen and (max-width: $breakpoint-lg)
+  // As soon as the split screen has content (so basically when its opened), it takes the available whole space
+  #content-bodyRight:has(*)
+    grid-column: 1 / 3
+    grid-row: 1 / 3
+    background-color: var(--body-background)
+    z-index: 1
+
 @media screen and (max-width: $breakpoint-lg) and (min-width: $breakpoint-sm)
   .hidden-for-tablet-and-small-laptops
     display: none !important

frontend/src/global_styles/layout/work_packages/_details_view.sass

@@ -45,8 +45,6 @@ body.router--work-packages-partitioned-split-view-new
   height: 100%
   position: relative
   width: 100%
-  // Min-width is actually 530px but the border already needs 2px
-  min-width: 528px
 
   @media only screen and (max-width: $breakpoint-xl)
     @at-root
@@ -83,6 +81,12 @@ body.router--work-packages-partitioned-split-view-new
   &_no-tabs
     top: 0
 
+    .work-package-details-tab,
+    .work-packages--details-header
+      // With the primerized tabs we need a different alignment
+      padding-right: 16px
+      padding-left: 16px
+
   &.-create-mode
     padding: 0 5px 10px 20px
 
@@ -110,7 +114,6 @@ body.router--work-packages-partitioned-split-view-new
 .work-packages--details-header-left
   display: flex
   flex-direction: column
-  margin-right: 4px
   max-width: 100%
   flex-basis: 100%
   flex-shrink: 1

frontend/src/global_styles/openproject/_mixins.sass

@@ -245,10 +245,6 @@ $scrollbar-size: 10px
     .work-packages--filters-optional-container
       margin-right: 15px
 
-@mixin space-between-content-and-split-screen
-  #content-bodyRight > *
-    margin-left: 12px
-
 @mixin modifying--placeholder
   border: 1px dashed var(--accent-color)
   pointer-events: none

frontend/src/global_styles/openproject/_notifications.sass

@@ -28,7 +28,6 @@
 
 .controller-notifications
   @include extended-content--bottom
-  @include space-between-content-and-split-screen
 
   #content
     height: 100%

frontend/src/global_styles/primer/_overrides.sass

@@ -53,7 +53,7 @@ action-menu
     margin-left: 12px
 
   &.op-primer-adjustment--UnderlineNav_spaciousLeft
-    padding-left: 12px
+    padding-left: 8px
 
 /* Remove margin-left: 2rem from Breadcrumbs */
 #breadcrumb,