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"
-      data-indicator-name="wpDetails"
-      *ngIf="workPackage">
+<div
+  class="work-packages--details loading-indicator--location"
+  data-indicator-name="wpDetails"
+  *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="wp-show--header-container">
-          <op-back-button *ngIf="showBackButton()"
-                       linkClass="work-packages-back-button"
-                       [customBackMethod]="backToList.bind(this)">
-          </op-back-button>
+        <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()"
+                linkClass="work-packages-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>
 
-        <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,52 +79,66 @@ 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,
-  .work-packages--details--subject .inline-edit--field
-    font-size: 1.125rem
-    font-weight: bold
-
-  .work-packages--details--subject
-    overflow: hidden
-
-    .inline-edit--field
-      height: 38px
-      line-height: 36px
-
-    // Style edit field to look like the display field.
-    // Thus we avoid a visual jump when editing the subject.
-    &.-active input
-      height: 34px
-      line-height: 34px
-      padding: 5px 0 5px 5px
-      font-size: 18px
-
-  .work-packages--details-form
-    display: flex
-    flex-direction: column
-    height: 100%
-    overflow: hidden
-
-  .work-package-details-tab
-    overflow-y: auto
-    overflow-x: hidden
-    flex-grow: 1
-    @include styled-scroll-bar
-
-  .work-packages--breadcrumb
-    display: grid
-    grid-template-columns: 1fr auto
-    grid-column-gap: 10px
-    align-items: center
-
-  .work-packages--details-button button
+// Fix height of subject row
+.work-packages--subject-element,
+.work-packages--details--subject .inline-edit--field
+  font-size: 1.125rem
+  font-weight: bold
+
+.work-packages--details--subject
+  overflow: hidden
+
+  .inline-edit--field
+    height: 38px
+    line-height: 36px
+
+  // Style edit field to look like the display field.
+  // Thus we avoid a visual jump when editing the subject.
+  &.-active input
+    height: 34px
+    line-height: 34px
+    padding: 5px 0 5px 5px
+    font-size: 18px
+
+.work-packages--details-form
+  display: flex
+  flex-direction: column
+  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
+  margin-bottom: 4px
+
+.work-packages--details-button
+  display: flex
+  align-items: center
+  margin-left: 4px
+
+  button
     margin-bottom: 0
 
+    &:only-child
+      margin-right: 4px
+
 .work-packages--type-selector
   flex-shrink: 0