Refine header, app bar, and side panel alignment (#10806)

Author: krisstern

core/src/main/resources/lib/layout/skeleton/skeleton.css

@@ -69,7 +69,11 @@
   gap: 0.125rem;
 
   & > div {
-    margin: 0 -0.7rem;
+    margin: 0 0 0 -0.5rem;
+
+    &:not(:first-of-type) {
+      opacity: 0.5;
+    }
   }
 }
 

src/main/scss/components/_app-bar.scss

@@ -80,7 +80,7 @@
   h1,
   h2 {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: 1.3125rem;
   }
 
   &__subtitle {
@@ -94,19 +94,20 @@
   flex-direction: row !important;
   align-items: center;
   justify-content: start !important;
-  gap: 1rem;
+  gap: 0.875rem;
   max-width: 1200px;
-  overflow: hidden;
   text-overflow: ellipsis;
 
   svg {
     width: 2rem !important;
     height: 2rem !important;
+    margin-left: -0.1875rem;
   }
 
   img {
     width: 2.375rem;
     height: 2.375rem;
+    margin-left: -0.375rem;
   }
 }
 

src/main/scss/components/_page-header.scss

@@ -48,7 +48,7 @@
     align-items: center;
     justify-content: center;
     align-self: center;
-    gap: 1rem;
+    gap: 0.875rem;
     color: var(--header-color);
     transition: opacity var(--standard-transition);
 
@@ -79,8 +79,7 @@
     }
 
     #jenkins-head-icon {
-      height: 2.125rem;
-      margin-left: 0.15rem;
+      width: 1.625rem;
     }
   }
 

src/main/scss/components/_side-panel-tasks.scss

@@ -1,7 +1,7 @@
 @use "../abstracts/mixins";
 @use "../base/breakpoints";
 
-$background-outset: 0.7rem;
+$background-outset: 0.5rem;
 
 #tasks,
 .tasks,
@@ -32,83 +32,84 @@ $background-outset: 0.7rem;
   }
 
   & > #tasks > .jenkins-search-container {
-    margin: 0 #{-$background-outset} 1rem;
+    margin: 0 0 1rem #{-$background-outset};
 
     .jenkins-search__icon {
-      width: 2.8rem;
+      width: 2.625rem;
       aspect-ratio: unset;
     }
 
     .jenkins-search__input {
-      padding-left: 2.6rem;
+      padding-left: 2.5rem;
     }
   }
 }
 
+#tasks .task {
+  margin: 0 0 0 calc($background-outset * -1);
+}
+
 #tasks,
 .tasks {
-  .task {
-    margin: 0 calc($background-outset * -1);
-
-    .task-link {
-      @include mixins.item;
-
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      padding: 0.5rem $background-outset;
-      gap: 0.65rem;
-      width: 100%;
-      font-size: var(--font-size-sm);
-      color: var(--text-color);
-      margin: 0;
-      transition: opacity var(--standard-transition);
-
-      .task-icon-link {
-        display: inline-flex;
-
-        svg,
-        img {
-          width: 1.375rem !important;
-          height: 1.375rem !important;
-          color: var(--text-color);
-
-          * {
-            transition: stroke-width var(--standard-transition);
-          }
+  .task .task-link {
+    @include mixins.item;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0.5rem 0.6875rem;
+    gap: 0.625rem;
+    width: 100%;
+    font-size: var(--font-size-sm);
+    color: var(--text-color);
+    margin: 0;
+    transition: opacity var(--standard-transition);
+    min-height: 2.375rem;
+
+    .task-icon-link {
+      display: inline-flex;
+
+      svg,
+      img {
+        width: 1.25rem !important;
+        height: 1.25rem !important;
+        color: var(--text-color);
+
+        * {
+          transition: stroke-width var(--standard-transition);
         }
       }
+    }
 
-      .task-icon-badge {
-        margin-left: auto;
-      }
+    .task-icon-badge {
+      margin-left: auto;
+    }
 
-      .task-link-text {
-        display: contents;
-        word-break: word-break;
-      }
+    .task-link-text {
+      display: contents;
+      word-break: word-break;
+    }
 
-      &--active {
-        font-weight: 450;
-        cursor: default;
+    &--active {
+      font-weight: var(--font-bold-weight);
+      cursor: default;
 
-        svg * {
-          stroke-width: 35px;
-        }
+      svg * {
+        stroke-width: 35px;
+      }
 
-        &::before {
-          background-color: var(--item-background--active) !important;
-        }
+      &::before {
+        background-color: var(--item-background--active) !important;
+      }
 
-        &::after {
-          box-shadow: none !important;
-        }
+      &::after {
+        box-shadow: none !important;
       }
+    }
 
-      &:not(:hover, &:active, &:focus, &--active) {
-        &::before {
-          border-color: transparent;
-        }
+    &:not(:hover, &:active, &:focus, &--active) {
+      &::before {
+        border-color: transparent;
       }
     }
   }