From 68d1f91c916528a38625f3361fcaa6262cd9d884 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 26 Apr 2026 16:07:50 +0100
Subject: [PATCH] Avoid hidden duplicate Header links

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Header/Header.module.css   | 17 ------
 packages/ui/src/components/Header/Header.tsx  | 55 ++++++++-----------
 2 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css
index a885393c3f..a0387952e3 100644
--- a/packages/ui/src/components/Header/Header.module.css
+++ b/packages/ui/src/components/Header/Header.module.css
@@ -121,18 +121,11 @@
     align-items: center;
     gap: var(--bui-space-2);
     min-width: 0;
-    transition: opacity 200ms ease, transform 200ms ease;
-  }
-
-  .bui-HeaderBreadcrumbs {
-    opacity: 1;
     transform: translateY(-50%);
   }
 
   .bui-HeaderBreadcrumbsSmall {
     gap: var(--bui-space-1);
-    opacity: 0;
-    transform: translateY(25%);
   }
 
   .bui-HeaderBreadcrumbs .bui-HeaderBreadcrumbLink,
@@ -180,16 +173,6 @@
     font-size: var(--bui-font-size-4);
   }
 
-  .bui-HeaderContent[data-stuck] .bui-HeaderBreadcrumbs {
-    opacity: 0;
-    transform: translateY(-125%);
-  }
-
-  .bui-HeaderContent[data-stuck] .bui-HeaderBreadcrumbsSmall {
-    opacity: 1;
-    transform: translateY(-50%);
-  }
-
   .bui-HeaderTags {
     display: flex;
     flex-direction: row;
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 2d8c37c4f9..e076b66240 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -180,37 +180,8 @@ export const Header = (props: HeaderProps) => {
   const titleAndActionsContent = (
     <>
       <div className={classes.titleStack}>
-        <div
-          className={classes.breadcrumbs}
-          aria-hidden={isStuck || undefined}
-          inert={isStuck ? '' : undefined}
-        >
-          {breadcrumbs &&
-            breadcrumbs.map(breadcrumb => (
-              <Fragment key={breadcrumb.label}>
-                <Link
-                  href={breadcrumb.href}
-                  color="secondary"
-                  className={classes.breadcrumbLink}
-                  standalone
-                >
-                  {breadcrumb.label}
-                </Link>
-                <RiArrowRightSLine
-                  className={classes.breadcrumbSeparator}
-                  size={16}
-                  color="var(--bui-fg-secondary)"
-                />
-              </Fragment>
-            ))}
-          <h2 className={classes.title}>{title}</h2>
-        </div>
-        {sticky && (
-          <div
-            className={classes.breadcrumbsSmall}
-            aria-hidden={!isStuck || undefined}
-            inert={isStuck ? undefined : ''}
-          >
+        {isStuck ? (
+          <div className={classes.breadcrumbsSmall}>
             {breadcrumbs &&
               breadcrumbs.map(breadcrumb => (
                 <Fragment key={breadcrumb.label}>
@@ -231,6 +202,28 @@ export const Header = (props: HeaderProps) => {
               ))}
             <h2 className={classes.titleSmall}>{title}</h2>
           </div>
+        ) : (
+          <div className={classes.breadcrumbs}>
+            {breadcrumbs &&
+              breadcrumbs.map(breadcrumb => (
+                <Fragment key={breadcrumb.label}>
+                  <Link
+                    href={breadcrumb.href}
+                    color="secondary"
+                    className={classes.breadcrumbLink}
+                    standalone
+                  >
+                    {breadcrumb.label}
+                  </Link>
+                  <RiArrowRightSLine
+                    className={classes.breadcrumbSeparator}
+                    size={16}
+                    color="var(--bui-fg-secondary)"
+                  />
+                </Fragment>
+              ))}
+            <h2 className={classes.title}>{title}</h2>
+          </div>
         )}
       </div>
       <div className={classes.controls}>{customActions}</div>