@flamingo-stack/openframe-frontend-core 0.0.458 → 0.0.459

package/src/components/chat/chat-ticket-list.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { ChatTicketItem, type ChatTicketItemData } from './entity-cards/chat-ticket-item'
 
 export interface ChatTicketListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -47,12 +46,7 @@ const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
             !fadeBottom && "border-b rounded-b-md",
           )}
         >
-          <OverlayScrollArea
-            viewportRef={scrollRef}
-            className="h-full"
-            contentClassName="overscroll-contain"
-            onScroll={updateFade}
-          >
+          <div ref={scrollRef} className="overflow-y-auto overscroll-contain h-full" onScroll={updateFade}>
             {tickets.map((ticket) => (
               <ChatTicketItem
                 key={ticket.id}
@@ -60,7 +54,7 @@ const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
                 onClick={onTicketClick}
               />
             ))}
-          </OverlayScrollArea>
+          </div>
 
           {/* Scroll-fade overlays — tinted with the page background so edge
               tickets fade into the surface behind the list in BOTH themes

package/src/components/chat/guide-welcome.tsx

@@ -4,7 +4,6 @@ import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { MingoIcon } from '../icons'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { Skeleton } from '../ui/skeleton'
 import { QuickActionWall } from './quick-action-wall'
 import { EntityIcon } from '../icon-display'
@@ -142,11 +141,10 @@ export function GuideWelcome({
       {/* Greeting + slash-command list share one scroll region; `relative` so
           the edge fades can overlay it. */}
       <div className="relative flex flex-1 min-h-0 flex-col">
-        <OverlayScrollArea
-          viewportRef={scrollRef}
+        <div
+          ref={scrollRef}
           onScroll={updateScrollFade}
-          className="flex-1 min-h-0"
-          contentClassName="flex min-h-full flex-col gap-[var(--spacing-system-m)] overscroll-contain"
+          className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto overscroll-contain"
         >
           {/* Greeting grows to fill (`flex-1`) so the slash-command list stays
               anchored below it — but its content is anchored at the TOP of the
@@ -189,7 +187,7 @@ export function GuideWelcome({
           </div>
 
           {children}
-        </OverlayScrollArea>
+        </div>
 
         {/* Edge scroll-fades — visible only when content is hidden beyond them. */}
         <ScrollFadeOverlay edge="top" visible={fadeTop} className="h-12" />

package/src/components/chat/mingo-chat-history.tsx

@@ -5,7 +5,6 @@ import { cn } from '../../utils/cn'
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
 import { Button } from '../ui/button'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { Ellipsis01Icon, SearchXmarkIcon } from '../icons-v2-generated'
 import { ChatListEmptyState } from './chat-list-empty-state'
 import type { DialogItem } from './types/component.types'
@@ -339,11 +338,10 @@ export function MingoChatHistory({
       {/* Scroll region — the search INPUT now lives in the panel header
           (Figma 116:51217), so the list is just the grouped rows + fades. */}
       <div className="relative flex flex-1 min-h-0 flex-col">
-        <OverlayScrollArea
-          viewportRef={scrollRef}
+        <div
+          ref={scrollRef}
           onScroll={updateFade}
-          className="flex-1 min-h-0"
-          contentClassName="flex flex-col gap-[var(--spacing-system-m)] overscroll-contain"
+          className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto overscroll-contain"
         >
           {noSearchResults ? (
             // No search matches — same centred glyph + title + caption layout as
@@ -376,7 +374,7 @@ export function MingoChatHistory({
             ))
           )}
           {hasMore ? <div ref={sentinelRef} className="h-px shrink-0" /> : null}
-        </OverlayScrollArea>
+        </div>
 
         {/* Scroll-fade — only while content is hidden in that direction. */}
         <ScrollFadeOverlay edge="top" visible={fadeTop} color="var(--color-bg-card)" className="h-12" />

package/src/components/chat/mingo-welcome.tsx

@@ -8,7 +8,6 @@ import { QuickActionChipButton } from './quick-action-chip'
 import { QuickActionWall } from './quick-action-wall'
 import { Button } from '../ui/button'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import {
   CompassIcon,
@@ -240,11 +239,10 @@ export function MingoWelcome({
           input. The wrapper is `relative` so the scroll-fade gradients can
           overlay the top/bottom edges. */}
       <div className="relative flex flex-1 min-h-0 flex-col">
-      <OverlayScrollArea
-        viewportRef={scrollRef}
+      <div
+        ref={scrollRef}
         onScroll={updateScrollFade}
-        className="flex-1 min-h-0"
-        contentClassName="flex min-h-full flex-col gap-[var(--spacing-system-m)] overscroll-contain"
+        className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto overscroll-contain"
       >
         {/* Greeting — grows to fill (`flex-1`) so it centres vertically,
             keeping the grid anchored at the bottom of the scroll area. Default
@@ -263,7 +261,7 @@ export function MingoWelcome({
           <p className="text-h4 text-ods-text-secondary">{subtitle}</p>
         </div>
       </div>
-      </OverlayScrollArea>
+      </div>
 
       {/* Edge scroll-fades — visible only when content is hidden beyond them.
           Fade into the panel's dark `ods-bg` surface (the default color), matching

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

@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useRef } from 'react'
-import { OverlayScrollArea } from '../../ui/overlay-scroll-area'
 import { BellOffIcon } from '../../icons-v2-generated/interface/bell-off-icon'
 import { ClockHistoryIcon, ArrowRightUpIcon } from '../../icons-v2-generated'
 import { useAppLayoutDrawerContainer } from '../../navigation/app-layout-context'
@@ -190,12 +189,9 @@ function DrawerScrollList({
 
   const isEmpty = unreadNotifications.length === 0
   return (
-    <OverlayScrollArea
-      viewportRef={scrollRef}
-      // 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)]"
+    <div
+      ref={scrollRef}
+      className="flex flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto px-[var(--spacing-system-m)]"
     >
       {isEmpty && !isLoadingMore ? (
         <EmptyState />
@@ -218,7 +214,7 @@ function DrawerScrollList({
           {loadMore && hasMore && <div ref={sentinelRef} className="h-1" aria-hidden="true" />}
         </>
       )}
-    </OverlayScrollArea>
+    </div>
   )
 }
 

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

@@ -21,7 +21,6 @@ import {
   XmarkIcon,
 } from '../../icons-v2-generated'
 import { useTrackerClock } from './use-tracker-clock'
-import { OverlayScrollArea } from '../../ui/overlay-scroll-area'
 import type { TimeTrackerData, TimeTrackerEntry, TimeTrackerStatus } from './types'
 
 interface CustomerAutocompleteOption extends AutocompleteOption {
@@ -150,18 +149,11 @@ export function TimeTrackerPanel({
   const visibleEntries = lastEntries.slice(0, 3)
 
   return (
-    <OverlayScrollArea
+    <div
       className={cn(
-        // 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)]',
+        'relative flex max-h-[calc(100vh-6rem)] w-full flex-col gap-[var(--spacing-system-l)] overflow-y-auto rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]',
         className,
       )}
-      // 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"
@@ -322,7 +314,7 @@ export function TimeTrackerPanel({
       <Button variant="outline" fullWidth onClick={onClose} className="md:hidden">
         Close
       </Button>
-    </OverlayScrollArea>
+    </div>
   )
 }
 

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

@@ -4,7 +4,6 @@ import React from 'react'
 import { cn } from '../../utils/cn'
 import type { ActionsMenuGroup } from '../ui/actions-menu'
 import { PageActions, type PageActionButton } from '../ui/page-actions'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { BackButton } from './back-button'
 
 // Legacy interface for backward compatibility (layout version)
@@ -394,7 +393,7 @@ function renderAdvancedPageContainer({
 
     switch (variant) {
       case 'detail':
-        return cn('flex-1 min-h-0', mobilePadding, contentClassName)
+        return cn('flex-1 overflow-auto', mobilePadding, contentClassName)
       case 'list':
         return cn('flex flex-col gap-4 md:gap-6', mobilePadding, contentClassName)
       case 'form':
@@ -408,21 +407,10 @@ function renderAdvancedPageContainer({
   return (
     <div className={getContainerClasses()}>
       {renderHeader()}
-
-      {variant === 'detail' ? (
-        // The only scrolling variant — standardized overlay scrollbar.
-        // `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>
-      ) : (
-        <div className={getContentClasses()}>
-          {children}
-        </div>
-      )}
+      
+      <div className={getContentClasses()}>
+        {children}
+      </div>
     </div>
   )
 }

package/src/components/ui/drawer.tsx

@@ -7,7 +7,6 @@ import { X } from "lucide-react"
 
 import { cn } from "../../utils/cn"
 import { useHeaderHeight } from "../../hooks/ui/use-header-height"
-import { OverlayScrollArea } from "./overlay-scroll-area"
 
 /** Unified overlay backdrop — dimmed, no blur. Single source of truth for
  *  every full-screen backdrop (Drawer, AppLayoutDrawer, MobileBurgerMenu,
@@ -531,16 +530,12 @@ DrawerDescription.displayName = "DrawerDescription"
 
 const DrawerBody = ({
   className,
-  children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <OverlayScrollArea
-    className={cn("flex-1 min-h-0", className)}
-    contentClassName="flex flex-col gap-4"
+  <div
+    className={cn("flex flex-1 flex-col gap-4 overflow-y-auto", className)}
     {...props}
-  >
-    {children}
-  </OverlayScrollArea>
+  />
 )
 DrawerBody.displayName = "DrawerBody"
 

package/src/components/ui/index.ts

@@ -177,4 +177,3 @@ export * from './simple-markdown-renderer'
 export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich-markdown-renderer'
 export * from './filter-pill-row'
 
-export * from './overlay-scroll-area'

package/src/components/ui/modal-v2.tsx

@@ -5,7 +5,6 @@ import { useEffect, useState } from "react"
 import { usePreventScroll } from "@react-aria/overlays"
 import { XmarkIcon } from "../icons-v2-generated"
 import { cn } from "../../utils/cn"
-import { OverlayScrollArea } from "./overlay-scroll-area"
 
 // Duration of the open/close animation in ms — keep in sync with the
 // `duration-200` utilities applied to the backdrop and panel below.
@@ -132,18 +131,9 @@ Modal.displayName = "ModalV2"
 
 const ModalContent = React.forwardRef<HTMLDivElement, ModalContentProps>(
   ({ children, className }, ref) => (
-    // `className` goes to BOTH layers on purpose: historically it styled the
-    // single scrolling div that directly parented the children, so it may carry
-    // layout (`flex flex-col gap-*` — must reach the scroller/`contentClassName`,
-    // the direct parent of the children) OR padding (must stay on the host, since
-    // OverlayScrollbars zeroes viewport padding). Each class lands where it works.
-    <OverlayScrollArea
-      viewportRef={ref}
-      className={cn("flex-1 min-h-0", className)}
-      contentClassName={className}
-    >
+    <div ref={ref} className={cn("flex-1 min-h-0 overflow-y-auto", className)}>
       {children}
-    </OverlayScrollArea>
+    </div>
   )
 )
 ModalContent.displayName = "ModalV2Content"

package/src/components/ui/modal.tsx

@@ -4,7 +4,6 @@ import * as React from "react"
 import { useEffect } from "react"
 import { usePreventScroll } from "@react-aria/overlays"
 import { cn } from "../../utils/cn"
-import { OverlayScrollArea } from "./overlay-scroll-area"
 
 interface ModalProps {
   isOpen: boolean
@@ -83,15 +82,9 @@ Modal.displayName = "Modal"
 /** @deprecated Use ModalV2Content from './modal-v2' instead. */
 const ModalContent = React.forwardRef<HTMLDivElement, ModalContentProps>(
   ({ children, className }, ref) => (
-    // See ModalV2Content: `className` may carry layout (must reach the scroller)
-    // or padding (must stay on the host), so it goes to both layers.
-    <OverlayScrollArea
-      viewportRef={ref}
-      className={cn("min-h-0 flex-1", className)}
-      contentClassName={className}
-    >
+    <div ref={ref} className={cn("overflow-y-auto min-h-0 flex-1", className)}>
       {children}
-    </OverlayScrollArea>
+    </div>
   )
 )
 ModalContent.displayName = "ModalContent"

package/src/styles/index.css

@@ -10,8 +10,6 @@
 /* Vendor/library style overrides */
 @import "./vendor-react-easy-crop.css";
 @import "./vendor-react-scroll.css";
-@import "./vendor-overlayscrollbars.css";
-@import "./overlay-scrollbars-theme.css";
 
 @tailwind base;
 @tailwind components;