From 9a29eeb28dbb6b6e76366049324c75109fee6baa Mon Sep 17 00:00:00 2001
From: CD Cabrera <cabrera.code@gmail.com>
Date: Tue, 1 Jul 2025 15:53:00 -0400
Subject: [PATCH] fix: hms-8708 landing page sticky header

---
 src/Components/LandingPage/LandingPage.tsx    | 140 +++++++++---------
 .../sharedComponents/ImageBuilderHeader.tsx   |   2 +-
 2 files changed, 72 insertions(+), 70 deletions(-)

diff --git a/src/Components/LandingPage/LandingPage.tsx b/src/Components/LandingPage/LandingPage.tsx
index 80b010d8..a1ea0ff7 100644
--- a/src/Components/LandingPage/LandingPage.tsx
+++ b/src/Components/LandingPage/LandingPage.tsx
@@ -86,26 +86,65 @@ export const LandingPage = () => {
   return (
     <>
       <ImageBuilderHeader activeTab={activeTabKey} />
-      {edgeParityFlag ? (
-        <Tabs
-          className="pf-c-tabs pf-c-page-header pf-c-table"
-          activeKey={activeTabKey}
-          onSelect={handleTabClick}
-        >
-          <Tab
-            eventKey={0}
-            title={<TabTitleText> Conventional (RPM-DNF){''} </TabTitleText>}
-            actions={
-              <HelpPopover
-                header={'Conventional (RPM-DNF)'}
-                body={
-                  <div>
+      <PageSection hasBodyWrapper={false}>
+        {edgeParityFlag ? (
+          <Tabs
+            className="pf-c-tabs pf-c-page-header pf-c-table"
+            activeKey={activeTabKey}
+            onSelect={handleTabClick}
+          >
+            <Tab
+              eventKey={0}
+              title={<TabTitleText> Conventional (RPM-DNF){''} </TabTitleText>}
+              actions={
+                <HelpPopover
+                  header={'Conventional (RPM-DNF)'}
+                  body={
+                    <div>
+                      <Content>
+                        <Content>
+                          With RPM-DNF, you can manage the system software by
+                          using the DNF package manager and updated RPM
+                          packages. This is a simple and adaptive method of
+                          managing and modifying the system over its lifecycle.
+                        </Content>
+                        <Content>
+                          <Button
+                            component="a"
+                            target="_blank"
+                            variant="link"
+                            icon={<ExternalLinkAltIcon />}
+                            iconPosition="right"
+                            isInline
+                            href={MANAGING_WITH_DNF_URL}
+                          >
+                            Learn more about managing images with DNF
+                          </Button>
+                        </Content>
+                      </Content>
+                    </div>
+                  }
+                />
+              }
+            >
+              {imageList}
+            </Tab>
+            <Tab
+              eventKey={1}
+              title={<TabTitleText>Immutable (OSTree) </TabTitleText>}
+              actions={
+                <HelpPopover
+                  header={'Immutable (OSTree)'}
+                  body={
                     <Content>
                       <Content>
-                        With RPM-DNF, you can manage the system software by
-                        using the DNF package manager and updated RPM packages.
-                        This is a simple and adaptive method of managing and
-                        modifying the system over its lifecycle.
+                        With OSTree, you can manage the system software by
+                        referencing a central image repository. OSTree images
+                        contain a complete operating system ready to be remotely
+                        installed at scale. You can track updates to images
+                        through commits and enable secure updates that only
+                        address changes and keep the operating system unchanged.
+                        The updates are quick, and the rollbacks are easy.
                       </Content>
                       <Content>
                         <Button
@@ -115,61 +154,24 @@ export const LandingPage = () => {
                           icon={<ExternalLinkAltIcon />}
                           iconPosition="right"
                           isInline
-                          href={MANAGING_WITH_DNF_URL}
+                          href={OSTREE_URL}
                         >
-                          Learn more about managing images with DNF
+                          Learn more about OSTree
                         </Button>
                       </Content>
                     </Content>
-                  </div>
-                }
-              />
-            }
-          >
-            {imageList}
-          </Tab>
-          <Tab
-            eventKey={1}
-            title={<TabTitleText>Immutable (OSTree) </TabTitleText>}
-            actions={
-              <HelpPopover
-                header={'Immutable (OSTree)'}
-                body={
-                  <Content>
-                    <Content>
-                      With OSTree, you can manage the system software by
-                      referencing a central image repository. OSTree images
-                      contain a complete operating system ready to be remotely
-                      installed at scale. You can track updates to images
-                      through commits and enable secure updates that only
-                      address changes and keep the operating system unchanged.
-                      The updates are quick, and the rollbacks are easy.
-                    </Content>
-                    <Content>
-                      <Button
-                        component="a"
-                        target="_blank"
-                        variant="link"
-                        icon={<ExternalLinkAltIcon />}
-                        iconPosition="right"
-                        isInline
-                        href={OSTREE_URL}
-                      >
-                        Learn more about OSTree
-                      </Button>
-                    </Content>
-                  </Content>
-                }
-              />
-            }
-          >
-            <EdgeImagesTable />
-          </Tab>
-        </Tabs>
-      ) : (
-        imageList
-      )}
-      <Outlet />
+                  }
+                />
+              }
+            >
+              <EdgeImagesTable />
+            </Tab>
+          </Tabs>
+        ) : (
+          imageList
+        )}
+        <Outlet />
+      </PageSection>
     </>
   );
 };
diff --git a/src/Components/sharedComponents/ImageBuilderHeader.tsx b/src/Components/sharedComponents/ImageBuilderHeader.tsx
index b85ad966..d44279cd 100644
--- a/src/Components/sharedComponents/ImageBuilderHeader.tsx
+++ b/src/Components/sharedComponents/ImageBuilderHeader.tsx
@@ -105,7 +105,7 @@ export const ImageBuilderHeader = ({
           isOpen={showImportModal}
         />
       )}
-      <PageHeader>
+      <PageHeader className="pf-m-sticky-top">
         <PageHeaderTitle
           className="title"
           title={