@flamingo-stack/openframe-frontend-core 0.0.457 → 0.0.458-snapshot.20260720215024

package/src/components/features/notifications/notification-drawer.tsx

@@ -192,8 +192,10 @@ function DrawerScrollList({
   return (
     <OverlayScrollArea
       viewportRef={scrollRef}
-      className="flex-1 min-h-0"
-      contentClassName="flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)]"
+      // Horizontal padding lives on the host: OverlayScrollbars zeroes viewport
+      // padding, so `px-*` on `contentClassName` would be silently dropped.
+      className="flex-1 min-h-0 px-[var(--spacing-system-m)]"
+      contentClassName="flex flex-col gap-[var(--spacing-system-xs)]"
     >
       {isEmpty && !isLoadingMore ? (
         <EmptyState />

package/src/components/features/time-tracker/time-tracker-panel.tsx

@@ -152,10 +152,16 @@ export function TimeTrackerPanel({
   return (
     <OverlayScrollArea
       className={cn(
-        'max-h-[calc(100vh-6rem)] w-full rounded-md border border-ods-border bg-ods-card',
+        // Padding lives on the host, NOT `contentClassName`: OverlayScrollbars
+        // forces `padding: 0` on the viewport, so padding on the scroller is
+        // silently dropped (see OverlayScrollArea docs).
+        'max-h-[calc(100vh-6rem)] w-full rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]',
         className,
       )}
-      contentClassName="relative flex flex-col gap-[var(--spacing-system-l)] p-[var(--spacing-system-m)]"
+      // No `relative` here so the absolute close button anchors to the padded
+      // host (OverlayScrollArea's host is always relative) and keeps its inset
+      // from the card edge instead of from the padding box.
+      contentClassName="flex flex-col gap-[var(--spacing-system-l)]"
     >
       <Button
         variant="transparent"

package/src/components/layout/page-container.tsx

@@ -411,7 +411,11 @@ function renderAdvancedPageContainer({
 
       {variant === 'detail' ? (
         // The only scrolling variant — standardized overlay scrollbar.
-        <OverlayScrollArea className={getContentClasses()}>
+        // `contentClassName` is forwarded to BOTH layers: padding stays effective
+        // on the host, while layout (`flex flex-col gap-*`) reaches the scroller,
+        // the direct parent of the children (OverlayScrollbars zeroes viewport
+        // padding, so padding on the scroller alone would be dropped).
+        <OverlayScrollArea className={getContentClasses()} contentClassName={contentClassName}>
           {children}
         </OverlayScrollArea>
       ) : (

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -15,7 +15,7 @@
  * renderer with extra plugins.
  */
 
-import { type ComponentType, type ReactNode } from 'react'
+import { Fragment, type ComponentType, type ReactNode } from 'react'
 import { PageLayout } from '../layout/page-layout'
 
 import { useRouter } from '../../embed-shims'
@@ -30,7 +30,7 @@ import { VideoBitesStrip } from '../features/video-bites-strip'
 import { toStripProfile } from '../features/video-bites-shared'
 import { useVideoWarmup } from '../features/use-video-warmup'
 import { getCaptionsUrl } from '../features/captions-url'
-import { RichMarkdownRenderer } from '../ui/rich-markdown-renderer'
+import { RichMarkdownRenderer } from '../ui/markdown'
 import { EntityTagBadges } from '../features/entity-tag-badges'
 import { LoadError } from '../ui/error-state'
 import { ArticleAuthorByline } from '../shared/article-author-byline'
@@ -244,8 +244,26 @@ export function OnboardingGuideDetailView({
           </div>
         )}
 
-        {/* Host slot — cross-type related-content / FAQ rail. */}
-        {relatedContent}
+        {/*
+         * Host slot — cross-type related-content / FAQ rail.
+         *
+         * KEYED DELIBERATELY. This is one member of PageLayout's static children
+         * array, and the only member whose element may be created in a SERVER
+         * component and crossed over the RSC boundary. Static JSX children are
+         * normally exempt from the key warning because `jsxs` runs
+         * `validateChildKeys` and stamps `_store.validated = 1` on each element —
+         * but a slot arriving over the wire is referenced as a lazy chunk wrapper,
+         * so validation marks the WRAPPER and the fulfilled path never copies the
+         * flag onto the revived element. It reaches the reconciler with
+         * `validated: 0, key: null` and warns, blaming PageLayout (the owner of the
+         * enclosing element) rather than anything actually at fault.
+         *
+         * A keyed Fragment emits no DOM, so rendered output is byte-identical.
+         * Do NOT "fix" this in PageLayout via `React.Children.toArray` — that would
+         * auto-key every consumer's children and change reconciliation identity for
+         * all of them, and that file carries an explicit FROZEN contract.
+         */}
+        <Fragment key="related-content">{relatedContent}</Fragment>
       </PageLayout>
   )
 }

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -19,7 +19,7 @@
 
 import type { ComponentType } from 'react';
 import { PageShell, PageLayout } from '../../ui';
-import { RichMarkdownRenderer } from '../../ui/rich-markdown-renderer';
+import { RichMarkdownRenderer } from '../../ui/markdown';
 import { useRouter } from '../../../embed-shims/next-navigation';
 import { useLegalDocs, type LegalDocument } from './use-legal-docs';
 import { formatLegalDate } from '../../../utils/format';

package/src/components/shared/product-release/release-detail-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, ComponentType, type ReactNode } from 'react';
+import { useState, useEffect, Fragment, ComponentType, type ReactNode } from 'react';
 import Link from '../../../embed-shims/next-link';
 import { useRouter } from '../../../embed-shims/next-navigation';
 import { Card, CardContent } from '../../ui/card';
@@ -11,7 +11,7 @@ import { PageShell } from '../../layout/article-detail-layout';
 import { PageLayout } from '../../layout/page-layout';
 import { FadePreview } from '../../ui/fade-preview';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
-import { RichMarkdownRenderer } from '../../ui/rich-markdown-renderer';
+import { RichMarkdownRenderer } from '../../ui/markdown';
 import { EntityTagBadges } from '../../features/entity-tag-badges';
 import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
 import type { EntityAuthor } from '../../../types/entity-author';
@@ -582,8 +582,23 @@ export function ReleaseDetailPage({
         )}
       </div>
 
-      {/* Host slot — end-of-article byline + related-content / FAQ rail. */}
-      {relatedContent}
+      {/*
+       * Host slot — end-of-article byline + related-content / FAQ rail.
+       *
+       * KEYED for the same reason as `onboarding-guide-detail-view.tsx`: this is a
+       * member of PageLayout's static children array, and a slot element built in a
+       * SERVER component crosses the RSC boundary as a lazy chunk wrapper, so
+       * `validateChildKeys` marks the wrapper and the fulfilled path never copies
+       * `_store.validated` onto the revived element — it reaches the reconciler
+       * unvalidated and warns.
+       *
+       * Today the hub's only consumer of this view is a `'use client'` wrapper that
+       * builds the slot locally, so no element actually crosses the boundary and
+       * this is pre-emptive. It is kept because the trap is invisible from here: a
+       * future server-built slot would warn with no clue pointing at this line.
+       * A keyed Fragment emits no DOM, so output is byte-identical either way.
+       */}
+      <Fragment key="related-content">{relatedContent}</Fragment>
       </PageLayout>
   );
 }