diff --git a/console/src/app/modules/new-header/header-button/header-button.component.html b/console/src/app/modules/new-header/header-button/header-button.component.html
index 39e22c24fc..460eafe780 100644
--- a/console/src/app/modules/new-header/header-button/header-button.component.html
+++ b/console/src/app/modules/new-header/header-button/header-button.component.html
@@ -1,6 +1,4 @@
-
diff --git a/console/src/app/modules/new-header/header-button/header-button.component.scss b/console/src/app/modules/new-header/header-button/header-button.component.scss
index 4615d26aa0..deacc8ae86 100644
--- a/console/src/app/modules/new-header/header-button/header-button.component.scss
+++ b/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);
- }
- }
}
diff --git a/console/src/app/modules/new-header/header-button/header-button.component.ts b/console/src/app/modules/new-header/header-button/header-button.component.ts
index b31573c065..16a933b11b 100644
--- a/console/src/app/modules/new-header/header-button/header-button.component.ts
+++ b/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 = '';
+}
diff --git a/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss b/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss
index 3a28987b25..5b2439bb12 100644
--- a/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss
+++ b/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;
diff --git a/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts b/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts
index 5f12a1660e..b6424de48e 100644
--- a/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts
+++ b/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
+ },
+ ]),
);
}
}
diff --git a/console/src/app/modules/new-header/instance-selector/instance-selector.component.scss b/console/src/app/modules/new-header/instance-selector/instance-selector.component.scss
index ef524e9f65..344226d2fa 100644
--- a/console/src/app/modules/new-header/instance-selector/instance-selector.component.scss
+++ b/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 {
diff --git a/console/src/app/modules/new-header/new-header.component.html b/console/src/app/modules/new-header/new-header.component.html
index 052e20b3cf..854fd17636 100644
--- a/console/src/app/modules/new-header/new-header.component.html
+++ b/console/src/app/modules/new-header/new-header.component.html
@@ -1,14 +1,15 @@