diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.html b/libs/ui/components/src/lib/content-hero/content-hero.component.html index 3ac415115..66950ef10 100644 --- a/libs/ui/components/src/lib/content-hero/content-hero.component.html +++ b/libs/ui/components/src/lib/content-hero/content-hero.component.html @@ -184,9 +184,6 @@
- - - } diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.scss b/libs/ui/components/src/lib/content-hero/content-hero.component.scss index 4b01a2d76..97f85afd4 100644 --- a/libs/ui/components/src/lib/content-hero/content-hero.component.scss +++ b/libs/ui/components/src/lib/content-hero/content-hero.component.scss @@ -22,9 +22,7 @@ --tag-border: rgba(0, 0, 0, 0.12); width: 100%; - height: 100%; display: block; - overflow: hidden; background: var(--surface-bg); color: var(--text-primary); } @@ -51,7 +49,9 @@ .hero { position: relative; width: 100%; - height: 100%; + // Natural height: the page scroll container lives outside the hero + // (PortalDetailShellComponent). `overflow: hidden` clips the scaled + // blurred backdrop fallback. overflow: hidden; background: var( --surface-bg @@ -161,10 +161,9 @@ } } - // Scrollable content area + // Content area (page scroll lives in the surrounding detail shell) &__content { - position: absolute; - inset: 0; + position: relative; z-index: 2; display: flex; gap: 32px; @@ -172,16 +171,7 @@ padding: 140px 40px 60px; max-width: var(--content-max-width); margin: 0 auto; - overflow-y: auto; - overflow-x: hidden; box-sizing: border-box; - - // Hide scrollbar but keep functionality - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } } // Error state @@ -191,6 +181,7 @@ justify-content: center; text-align: center; gap: 16px; + min-height: 50vh; .error-icon { font-size: 64px;