fix(ui5-dynamic-page): correct header snap/pin inconsistency at page top (#11098)

Problem:
Several issues occurred with the header snap/pin interaction:

When the header was pinned and then snapped, it would glitch into an inconsistent state appearing both snapped and unsnapped simultaneously
After unpinning a previously pinned header, attempting to snap it would cause the same visual inconsistency
Pinned headers that were snapped remained in a pinned state, causing unexpected behavior

Solution:
Modified the _toggleHeader method to properly detect when a pinned header is being snapped and ensure it unpins automatically. Also improved the onPinClick method to better handle unpinning when at the top of the page by checking the scroll position and updating the showHeaderInStickArea property accordingly.

Fixes: #11088

Author: NakataCode

packages/fiori/cypress/specs/DynamicPage.cy.tsx

@@ -0,0 +1,38 @@
+import DynamicPage from "../../src/DynamicPage.js";
+import DynamicPageTitle from "../../src/DynamicPageTitle.js";
+import DynamicPageHeader from "../../src/DynamicPageHeader.js";
+
+describe("DynamicPage", () => {
+  beforeEach(() => {
+    cy.mount(
+      <DynamicPage id="test-dynamic-page" style="height: 600px;">
+        <DynamicPageTitle slot="titleArea">
+          <div slot="heading">Page Title</div>
+        </DynamicPageTitle>
+        <DynamicPageHeader slot="headerArea">
+          <div>Header Content</div>
+        </DynamicPageHeader>
+        <div style={{ height: "1000px" }}>
+          Page content with enough height to enable scrolling
+        </div>
+      </DynamicPage>
+    );
+    
+    cy.get("#test-dynamic-page").as("dynamicPage");
+  });
+
+  it("should unpin the header when snapping after being pinned", () => {
+    cy.get("@dynamicPage")
+      .invoke("prop", "headerPinned", true);
+    
+    cy.get("@dynamicPage")
+      .invoke("prop", "headerSnapped", true);
+    
+    cy.get("@dynamicPage")
+      .invoke("prop", "headerSnapped", false);
+    
+    cy.get("@dynamicPage")
+      .invoke("prop", "headerPinned")
+      .should("be.false");
+  });
+});

packages/fiori/src/DynamicPage.ts

@@ -351,6 +351,8 @@ class DynamicPage extends UI5Element {
 		this.headerPinned = !this.headerPinned;
 		if (this.headerPinned) {
 			this.showHeaderInStickArea = true;
+		} else if (this.scrollContainer!.scrollTop === 0) {
+			this.showHeaderInStickArea = false;
 		}
 		this.fireDecoratorEvent("pin-button-toggle");
 		await renderFinished();
@@ -372,6 +374,17 @@ class DynamicPage extends UI5Element {
 		const headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;
 		const currentScrollTop = this.scrollContainer!.scrollTop;
 
+		if (!this._headerSnapped && this.headerPinned) {
+			this.headerPinned = false;
+			this.fireDecoratorEvent("pin-button-toggle");
+		}
+
+		if (currentScrollTop <= SCROLL_THRESHOLD) {
+			this._headerSnapped = !this._headerSnapped;
+			this.showHeaderInStickArea = this._headerSnapped;
+			return;
+		}
+
 		if (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {
 			if (!this._headerSnapped) {
 				this._headerSnapped = true;