More fixes to tab styles

frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html

@@ -44,6 +44,7 @@
         <ng-container *ngIf="tab.counter(injector) | async as tabCounter">
           <span
             *ngIf="tabCounter > 0 && !tab.showCountAsBubble"
+            class="op-tab-row--link-plain-counter"
             data-qa-selector="tab-count"
           > ({{ tabCounter }})</span>
         </ng-container>
@@ -68,6 +69,8 @@
   >
     <span class="icon-arrow-right2"></span>
   </button>
+</div>
+
 <ul class="op-scrollable-tabs--actions">
   <ng-content select="[slot=actions]"></ng-content>
 </ul>

frontend/src/global_styles/content/_tabs.sass

@@ -29,21 +29,23 @@
       border-bottom: 0
 
   &--link
-    display: block
+    display: flex
+    align-items: center
     padding-left: 1rem
     padding-right: 1rem
     color: var(--body-font-color)
     text-decoration: none
     font-size: var(--generic-table--header-font-size)
+    border-bottom: 2px solid transparent
+    border-top: 2px solid transparent
+    box-sizing: border-box
 
     &:hover
       text-decoration: none
-      border-bottom: 2px solid
       border-bottom-color: var(--light-gray)
 
     &_selected, &_selected:hover
       color: var(--content-link-color)
-      border-bottom: 2px solid
       border-bottom-color: var(--content-link-color)
 
     &_disabled
@@ -51,3 +53,6 @@
       pointer-events: none
       border-bottom-width: 0
       color: var(--tabs-font-color-disabled)
+
+  &--link-plain-counter
+    margin-left: 5px