From a2a8e992d51e87a6f0b068bdfead977f3d057064 Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Wed, 11 Mar 2026 13:28:12 +0200
Subject: [PATCH] fix(header): fixed profile and language dropdown positioning
 #354

---
 .../header-language/header-language.component.html  |  2 +-
 .../header-profile/header-profile.component.html    |  2 +-
 .../header-profile/header-profile.component.scss    |  3 ++-
 .../header/header-role/header-role.component.html   |  2 +-
 .../overlay/popover/popover.component.html          |  2 +-
 .../overlay/popover/popover.component.spec.ts       | 13 ++++++++++---
 .../components/overlay/popover/popover.component.ts |  6 ++++++
 7 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/tedi/components/layout/header/header-language/header-language.component.html b/tedi/components/layout/header/header-language/header-language.component.html
index 6d27ad7ab..f0ca1e360 100644
--- a/tedi/components/layout/header/header-language/header-language.component.html
+++ b/tedi/components/layout/header/header-language/header-language.component.html
@@ -5,7 +5,7 @@
   class="tedi-header-language__label"
   >{{ "header.select-lang" | tediTranslate }}</span
 >
-<tedi-popover [withBorder]="true" position="bottom">
+<tedi-popover [withBorder]="true" position="bottom" [preventOverflow]="true" appendTo="">
   <button
     type="button"
     tedi-popover-trigger
diff --git a/tedi/components/layout/header/header-profile/header-profile.component.html b/tedi/components/layout/header/header-profile/header-profile.component.html
index 8af025e11..e4ff98b8c 100644
--- a/tedi/components/layout/header/header-profile/header-profile.component.html
+++ b/tedi/components/layout/header/header-profile/header-profile.component.html
@@ -34,7 +34,7 @@
   </ng-container>
 
   <ng-container *showAt="dropdown">
-    <tedi-popover [withBorder]="true" position="bottom">
+    <tedi-popover [withBorder]="true" position="bottom" [preventOverflow]="true" appendTo="">
       <button
         tedi-button
         tedi-popover-trigger
diff --git a/tedi/components/layout/header/header-profile/header-profile.component.scss b/tedi/components/layout/header/header-profile/header-profile.component.scss
index 602da3967..433c3edfb 100644
--- a/tedi/components/layout/header/header-profile/header-profile.component.scss
+++ b/tedi/components/layout/header/header-profile/header-profile.component.scss
@@ -46,12 +46,13 @@ tedi-header-profile {
     display: flex;
     flex-direction: column;
     width: var(--navigation-vertical-item-width-default);
+    max-width: 100%;
     min-height: calc(100dvh - var(--layout-header-min-height));
     max-height: 100%;
     overflow-y: auto;
     background: var(--general-surface-primary);
 
-    > * {
+    >* {
       padding: var(--layout-header-modal-item-padding);
 
       &:not(:last-child) {
diff --git a/tedi/components/layout/header/header-role/header-role.component.html b/tedi/components/layout/header/header-role/header-role.component.html
index 973a70f22..0230e692f 100644
--- a/tedi/components/layout/header/header-role/header-role.component.html
+++ b/tedi/components/layout/header/header-role/header-role.component.html
@@ -46,7 +46,7 @@
   }
 
   <ng-container *ngIf="representatives().length > 1; else normalText">
-    <tedi-popover [withBorder]="true" position="bottom">
+    <tedi-popover [withBorder]="true" position="bottom" [preventOverflow]="true" appendTo="">
       <button
         type="button"
         tedi-popover-trigger
diff --git a/tedi/components/overlay/popover/popover.component.html b/tedi/components/overlay/popover/popover.component.html
index 729e2f569..634e3df0f 100644
--- a/tedi/components/overlay/popover/popover.component.html
+++ b/tedi/components/overlay/popover/popover.component.html
@@ -3,7 +3,7 @@
   #floatUiComponent
   looseTrigger="none"
   ariaRole="dialog"
-  appendTo="body"
+  [appendTo]="appendTo()"
   [floatUiLoose]="floatUiComponent"
   [targetElement]="popoverTrigger().host.nativeElement"
   [loosePlacement]="position()"
diff --git a/tedi/components/overlay/popover/popover.component.spec.ts b/tedi/components/overlay/popover/popover.component.spec.ts
index 6ef685127..b4147c87d 100644
--- a/tedi/components/overlay/popover/popover.component.spec.ts
+++ b/tedi/components/overlay/popover/popover.component.spec.ts
@@ -12,6 +12,7 @@ import { PopoverContentComponent } from "./popover-content/popover-content.compo
     <tedi-popover
       [position]="position"
       [preventOverflow]="preventOverflow"
+      [appendTo]="appendTo"
       [dismissible]="dismissible"
       [hideOnScroll]="hideOnScroll"
       [withBorder]="withBorder"
@@ -28,6 +29,7 @@ import { PopoverContentComponent } from "./popover-content/popover-content.compo
 class TestHostComponent {
   position: PopoverPosition = "top";
   preventOverflow = false;
+  appendTo = "body";
   dismissible = true;
   hideOnScroll = false;
   withBorder = false;
@@ -91,9 +93,14 @@ describe("PopoverComponent", () => {
     expect(trigger?.getAttribute("aria-haspopup")).toBe("dialog");
   });
 
-  it('should have appendTo="body" on float-ui-content', () => {
-    const floatUiContent = hostEl.querySelector("float-ui-content");
-    expect(floatUiContent?.getAttribute("appendTo")).toBe("body");
+  it('should have default appendTo="body" on float-ui-content', () => {
+    expect(component.appendTo()).toBe("body");
+  });
+
+  it("should update appendTo when input changes", () => {
+    hostComponent.appendTo = "";
+    fixture.detectChanges();
+    expect(component.appendTo()).toBe("");
   });
 
   it("should not include the border class by default", () => {
diff --git a/tedi/components/overlay/popover/popover.component.ts b/tedi/components/overlay/popover/popover.component.ts
index be0db3dbe..21eb8afbb 100644
--- a/tedi/components/overlay/popover/popover.component.ts
+++ b/tedi/components/overlay/popover/popover.component.ts
@@ -67,6 +67,12 @@ export class PopoverComponent implements AfterContentChecked {
    * @default false
    */
   lockScroll = input(false);
+  /**
+   * Append floating element to given selector.
+   * Use 'body' to append at the end of DOM or empty string to append next to trigger element.
+   * @default "body"
+   */
+  readonly appendTo = input("body");
   /** Delay time (in ms) for closing popover when not hovering trigger or content.
    * @default 100
    */