fix styles, home buttons

console/src/app/modules/new-header/header-button/header-button.component.html

@@ -1,6 +1,4 @@
-<span class="header-text">
-  <ng-content></ng-content>
-</span>
 <button class="header-button" matRipple [matRippleUnbounded]="false">
   <ng-icon size="1.3rem" name="heroChevronUpDown"></ng-icon>
+  <span class="sr-only">{{ ariaLabel }}</span>
 </button>

console/src/app/modules/new-header/header-button/header-button.component.scss

@@ -10,6 +10,18 @@
   cursor: pointer;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 @mixin header-button-theme($theme) {
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
@@ -22,7 +34,7 @@
     border: 0;
     background: transparent;
     border-radius: 6px;
-    padding: 0 0.5rem;
+    padding: 0 0.25rem;
     cursor: pointer;
     color: map-get($foreground, text);
 
@@ -30,25 +42,4 @@
       background-color: if($is-dark-theme, #ffffff10, #00000010);
     }
   }
-
-  .header-text {
-    height: 36px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    border: none;
-    color: map-get($foreground, text);
-    border-radius: 6px;
-    position: relative;
-    font-size: 14px;
-    padding: 0 0.75rem;
-    text-align: left;
-    background-color: transparent;
-    cursor: pointer;
-    transition: all ease 0.2s;
-
-    &:hover {
-      background-color: if($is-dark-theme, #ffffff10, #00000010);
-    }
-  }
 }

console/src/app/modules/new-header/header-button/header-button.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { heroChevronUpDown } from '@ng-icons/heroicons/outline';
 import { MatRippleModule } from '@angular/material/core';
@@ -12,4 +12,6 @@ import { MatRippleModule } from '@angular/material/core';
   imports: [NgIconComponent, MatRippleModule],
   providers: [provideIcons({ heroChevronUpDown })],
 })
-export class HeaderButtonComponent {}
+export class HeaderButtonComponent {
+  @Input() ariaLabel: string = '';
+}

console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss

@@ -2,8 +2,7 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
   $is-dark-theme: map-get($theme, is-dark);
-
-  $border-radius: 1rem;
+  $border-radius: 0.5rem;
 
   .dropdown-content {
     max-height: 50vh;

console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts

@@ -91,7 +91,18 @@ export class HeaderDropdownComponent implements OnInit {
                 overlayY: 'bottom',
               },
             ])
-        : undefined!,
+        : this.overlay
+            .position()
+            .flexibleConnectedTo(this.trigger.elementRef)
+            .withPositions([
+              {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 8, // 8px gap between trigger and overlay
+              },
+            ]),
     );
   }
 }

console/src/app/modules/new-header/instance-selector/instance-selector.component.scss

@@ -19,6 +19,7 @@
 
   .dropdown-label {
     color: if($is-dark-theme, #ffffff60, #00000060);
+    font-size: 14px;
   }
 
   .settings-button {

console/src/app/modules/new-header/new-header.component.html

@@ -1,14 +1,15 @@
 <div class="new-header-wrapper">
   <ng-container *ngIf="myInstanceQuery.data()?.instance as instance">
     <ng-container *ngTemplateOutlet="slash"></ng-container>
+    <a class="new-header-breadcrumb" matRipple [matRippleUnbounded]="false" [routerLink]="['/instance']">
+      {{ instance.name }}
+    </a>
     <cnsl-header-button
       cdkOverlayOrigin
       #instanceTrigger="cdkOverlayOrigin"
       (click)="isInstanceDropdownOpen.set(!isInstanceDropdownOpen())"
+      ariaLabel="{{ instance.name }}"
     >
-      <a class="new-header-breadcrumb" matRipple [matRippleUnbounded]="false" [routerLink]="bread.routerLink">
-        {{ instance.name }}
-      </a>
     </cnsl-header-button>
     <cnsl-header-dropdown
       [trigger]="instanceTrigger"
@@ -31,12 +32,21 @@
   </ng-container>
   <ng-container *ngIf="['org.read'] | hasRole | async">
     <ng-container *ngTemplateOutlet="slash"></ng-container>
+    <a
+      *ngIf="activeOrganizationQuery.data() as org"
+      class="new-header-breadcrumb"
+      matRipple
+      [matRippleUnbounded]="false"
+      [routerLink]="['/']"
+    >
+      {{ org.name }}
+    </a>
     <cnsl-header-button
       cdkOverlayOrigin
       #orgTrigger="cdkOverlayOrigin"
       (click)="isOrgDropdownOpen.set(!isOrgDropdownOpen())"
+      ariaLabel="{{ activeOrganizationQuery.data()?.name }}"
     >
-      <ng-container *ngIf="activeOrganizationQuery.data() as org">{{ org.name }}</ng-container>
     </cnsl-header-button>
     <cnsl-header-dropdown [trigger]="orgTrigger" [isOpen]="isOrgDropdownOpen()" (closed)="isOrgDropdownOpen.set(false)">
       <cnsl-organization-selector (orgChanged)="isOrgDropdownOpen.set(false)"></cnsl-organization-selector>

console/src/assets/i18n/en.json

@@ -80,7 +80,7 @@
     },
     "SETTINGS": {
       "INSTANCE": {
-        "TITLE": "Default Settings",
+        "TITLE": "Instance Settings",
         "DESCRIPTION": "Default settings for all organizations. With the right permissions, some of them are overridable in organization settings."
       },
       "ORG": {