Merge pull request #9831 from opf/fix/39771-wp-tabs-spacings

Fix margins and arrangement of the activity tab header

frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.html

@@ -1,42 +1,53 @@
-<div class="work-packages--details loading-indicator--location"
+<div
+  class="work-packages--details loading-indicator--location"
   data-indicator-name="wpDetails"
-      *ngIf="workPackage">
+  *ngIf="workPackage"
+>
     <op-wp-tabs [workPackage]="workPackage" view="split"></op-wp-tabs>
     <div class="work-packages--details-content work-packages-tab-view--overflow" *ngIf="workPackage">
-    <span class="hidden-for-sighted" tabindex="-1" [opAutofocus]="shouldFocus" [textContent]="focusAnchorLabel">
-      </span>
-
-      <div class="work-packages--breadcrumb">
-        <wp-breadcrumb [workPackage]="workPackage"></wp-breadcrumb>
-
-        <op-work-package-mark-notification-button
-          *ngIf="(displayNotificationsButton$ | async) && keepTab.currentTabIdentifier === 'activity'"
-          class="work-packages--details-button"
-          [workPackage]="workPackage"
-          buttonClasses="-round"
-          data-qa-selector="mark-notification-read-button"
-        ></op-work-package-mark-notification-button>
-      </div>
+      <span
+        class="hidden-for-sighted"
+        tabindex="-1"
+        [opAutofocus]="shouldFocus"
+        [textContent]="focusAnchorLabel"
+      ></span>
 
       <edit-form
         [resource]="workPackage"
         class="work-packages--details-form"
       >
+        <div class="work-packages--details-header">
+          <div class="work-packages--details-header-left">
+            <wp-breadcrumb
+              [workPackage]="workPackage"
+              class="work-packages--breadcrumb"
+            ></wp-breadcrumb>
+
             <div class="wp-show--header-container">
-          <op-back-button *ngIf="showBackButton()"
+              <op-back-button
+                *ngIf="showBackButton()"
                 linkClass="work-packages-back-button"
-                       [customBackMethod]="backToList.bind(this)">
-          </op-back-button>
+                [customBackMethod]="backToList.bind(this)"
+              ></op-back-button>
 
-          <div class="subject-header">
-            <wp-subject></wp-subject>
+              <wp-subject class="subject-header"></wp-subject>
             </div>
           </div>
 
-        <div class="work-package-details-tab"
-             data-notification-selector='notification-scroll-container'
-             ui-view>
+          <op-work-package-mark-notification-button
+            *ngIf="(displayNotificationsButton$ | async) && keepTab.currentTabIdentifier === 'activity'"
+            class="work-packages--details-button"
+            [workPackage]="workPackage"
+            buttonClasses="-round"
+            data-qa-selector="mark-notification-read-button"
+          ></op-work-package-mark-notification-button>
         </div>
+
+        <div
+          class="work-package-details-tab"
+          data-notification-selector='notification-scroll-container'
+          ui-view
+        ></div>
       </edit-form>
     </div>
 

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

@@ -79,9 +79,6 @@ body.router--work-packages-partitioned-split-view-new
   bottom:          55px
   width:           100%
   overflow:        hidden
-  padding:         0 5px 10px 20px
-
-.work-packages--details
 
 // Fix height of subject row
 .work-packages--subject-element,
@@ -110,21 +107,38 @@ body.router--work-packages-partitioned-split-view-new
   height: 100%
   overflow: hidden
 
+.work-packages--details-header
+  display: flex
+  padding: 0 5px 10px 20px
+  border-bottom: 1px solid #ddd
+
+.work-packages--details-header-left
+  display: flex
+  flex-direction: column
+  flex-grow: 1
+  margin-right: 4px
+
 .work-package-details-tab
   overflow-y: auto
   overflow-x: hidden
   flex-grow: 1
+  padding: 0 5px 10px 20px
   @include styled-scroll-bar
 
 .work-packages--breadcrumb
-    display: grid
-    grid-template-columns: 1fr auto
-    grid-column-gap: 10px
+  margin-bottom: 4px
+
+.work-packages--details-button
+  display: flex
   align-items: center
+  margin-left: 4px
 
-  .work-packages--details-button button
+  button
     margin-bottom: 0
 
+    &:only-child
+      margin-right: 4px
+
 .work-packages--type-selector
   flex-shrink: 0