[#55033] harmonized github and gitlab tab headers

- used op-tab-content styles
  - similar to files tab
- removed custom style for headers
- added op-tab-content--text-box style (spacing top) for empty state

Author: Kharonus

frontend/src/global_styles/content/work_packages/tabs/_tab_content.sass

@@ -37,6 +37,9 @@
     .op-files-tab--storage-info-box:not(:last-child)
       margin-bottom: $spot-spacing-1
 
+  &--text-box
+    margin-top: $spot-spacing-0_5
+
   &--header
     border-bottom: 1px solid #ddd
     padding-bottom: $spot-spacing-0_75

modules/github_integration/frontend/module/tab-header/styles/tab-header.sass

@@ -27,15 +27,6 @@
  */
 
 .github-pr-header
-  display: flex
-  flex-wrap: wrap-reverse
-  justify-content: flex-end
-
-  padding-bottom: 4px
-  border-bottom: 1px solid #ddd
-
-  margin: 0 0 0.8rem 0
-
   .title
     flex: 1 1 auto
     border-bottom: 0

modules/github_integration/frontend/module/tab-header/tab-header.template.html

@@ -1,4 +1,4 @@
-<div class="github-pr-header">
+<div class="github-pr-header op-tab-content--header">
   <h3 class="title">
     <op-icon icon-classes="button--icon icon-merge-branch"></op-icon>
     {{text.title}}

modules/github_integration/frontend/module/tab-prs/tab-prs.component.html

@@ -1,5 +1,8 @@
 <ng-container *ngIf="(pullRequests$ | async)?.length === 0">
-  <p [innerHTML]="emptyText"></p>
+  <p
+    class="op-tab-content--text-box"
+    [innerHTML]="emptyText"
+  ></p>
 </ng-container>
 
 <op-github-pull-request

modules/gitlab_integration/frontend/module/tab-header-issue/styles/tab-header-issue.sass

@@ -28,13 +28,6 @@
 //++
 
 .gitlab-issue-header
-  display: flex
-  flex-wrap: wrap-reverse
-  justify-content: flex-end
-
-  border-bottom: 1px solid #ddd
-  background-color: var(--body-background)
-
   .title
     flex: 1 1 auto
     border-bottom: 0

modules/gitlab_integration/frontend/module/tab-header-issue/tab-header-issue.template.html

@@ -1,4 +1,4 @@
-<div class="gitlab-issue-header">
+<div class="gitlab-issue-header op-tab-content--header">
   <svg class="s16x32"><use xlink:href="#issue_open" /></svg>
   <h3 class="title">   
     {{text.title}}

modules/gitlab_integration/frontend/module/tab-header-mr/styles/tab-header-mr.sass

@@ -28,13 +28,6 @@
 //++
 
 .gitlab-mr-header
-  display: flex
-  flex-wrap: wrap-reverse
-  justify-content: flex-end
-
-  border-bottom: 1px solid #ddd
-  background-color: var(--body-background)
-
   .title
     flex: 1 1 auto
     border-bottom: 0

modules/gitlab_integration/frontend/module/tab-header-mr/tab-header-mr.template.html

@@ -1,4 +1,4 @@
-<div class="gitlab-mr-header">
+<div class="gitlab-mr-header op-tab-content--header">
   <svg class="s16x32"><use xlink:href="#merge-request_open" /></svg>
   <h3 class="title">
     {{text.title}}

modules/gitlab_integration/frontend/module/tab-issue/tab-issue.template.html

@@ -1,5 +1,8 @@
 <ng-container *ngIf="gitlabIssues.length === 0">
-  <p [innerHTML]="getEmptyText()"></p>
+  <p
+    class="op-tab-content--text-box"
+    [innerHTML]="getEmptyText()"
+  ></p>
 </ng-container>
 
 <gitlab-issue [gitlabIssue]="gitlabIssue" *ngFor="let gitlabIssue of gitlabIssues"></gitlab-issue>

modules/gitlab_integration/frontend/module/tab-mrs/tab-mrs.template.html

@@ -1,5 +1,8 @@
 <ng-container *ngIf="mergeRequests.length === 0">
-  <p [innerHTML]="getEmptyText()"></p>
+  <p
+    class="op-tab-content--text-box"
+    [innerHTML]="getEmptyText()"
+  ></p>
 </ng-container>
 
 <gitlab-merge-request [mergeRequest]="mergeRequest" *ngFor="let mergeRequest of mergeRequests"></gitlab-merge-request>