Session: majestic-whistling-beaver-subagent-a08def15 — 2026-04-13

Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-haiku-4-5-20251001`

Stats: 1 user messages, 29 tool calls, tools used: Bash, Read.

Conversation

Turn 1 — User

Explore the Oxygen design system at /Users/USER/workspace/doctolib/oxygen to understand:

1. What Modal/Dialog components are available (look in packages/ directory)
2. What layout primitives exist (Stack, Box, etc.) that support flex/overflow
3. Whether there are any "SidePanel" or "FilterPanel" components
4. Any existing scrollable container patterns

Specifically look for: - Modal or Dialog component that would host NHRDocumentList - Components with overflow-y-auto or scroll behavior - Any layout patterns that combine a sticky header + scrollable content + sticky footer

List the relevant component names and their file paths. Read the source of the most relevant ones (Modal, Dialog, Stack, Box).

Turn 1 — Assistant

I'll explore the Oxygen design system to understand the available components and patterns. Let me start by examining the directory structure.

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen -type f -name "*.ts" -o -name "*.tsx" -o -name "*.js" -o -name "*.jsx" | head -30

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/commitlint.config.ts /Users/USER/workspace/doctolib/oxygen/lint-staged.config.js /Users/USER/workspace/doctolib/oxygen/prettier.config.js /Users/USER/workspace/doctolib/oxygen/vite/svg-plugin.ts /Users/USER/workspace/doctolib/oxygen/vite/vite.config.base.ts /Users/USER/workspace/doctolib/oxygen/scripts/check-exports.ts /Users/USER/workspace/doctolib/oxygen/scripts/extract-package-info-from-paths.test.ts /Users/USER/workspace/doctolib/oxygen/scripts/extract-p …(truncated, 2349 more chars)

Let me explore the packages directory structure to find Modal/Dialog components:

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/ | grep -E "^d"

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 384 B Wed Feb 25 13:12:45 2026 . drwxr-xr-x clertonra staff 1.3 KB Fri Mar 13 11:56:52 2026 .. drwxr-xr-x clertonra staff 608 B Fri Mar 13 11:56:52 2026 b2b drwxr-xr-x clertonra staff 576 B Fri Mar 13 11:56:52 2026 b2c drwxr-xr-x clertonra staff 448 B Wed Feb 25 13:12:44 2026 codemods drwxr-xr-x clertonra staff 832 B Fri Mar 13 11:56:52 2026 core drwxr-xr-x clertonra staff 544 B Fri Mar 13 11:56:52 2026 icons drwxr-xr-x clertonra staff 480 B Fri Mar 13 11:56:52 …(truncated, 303 more chars)

Let me look at the core package which likely contains the main components:

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/components/ 2>/dev/null | head -50

Tool results:

→ result (ok): (Bash completed with no output)

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages/core -type d -name "src" | head -5

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 . drwxr-xr-x clertonra staff 832 B Fri Mar 13 11:56:52 2026 .. drwxr-xr-x clertonra staff 224 B Wed Feb 25 13:12:44 2026 a11y drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 actions drwxr-xr-x clertonra staff 96 B Wed Feb 25 13:12:44 2026 collection drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 common .rw-r--r-- clertonra staff 45 B Wed Feb 25 13:12:44 2026 constants.ts drwxr-xr-x clertonra staff 832 B Wed …(truncated, 1872 more chars)

Good! I can see there's an "overlays" directory (likely contains Modal/Dialog) and a "layout" directory. Let me search for Modal and Dialog components:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages/core/src -type f \( -name "*Modal*" -o -name "*Dialog*" -o -name "*SidePanel*" -o -name "*FilterPanel*" \)

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/inlined/react-overlays/Modal.jsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/inlined/react-overlays/ModalManager.js /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/ModalFooter/ModalFooter.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/ModalFooter/ModalFooter.scss /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Dialog/Dialog.scss /Users/USER/workspace/doctolib/oxygen/package …(truncated, 1704 more chars)

Excellent! Now let me look at the layout components:

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 512 B Fri Mar 13 11:56:52 2026 . drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 .. drwxr-xr-x clertonra staff 192 B Wed Feb 25 13:12:44 2026 bleed drwxr-xr-x clertonra staff 288 B Fri Mar 13 11:56:52 2026 carousel drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 Columns .rw-r--r-- clertonra staff 14 KB Wed Feb 25 13:12:44 2026 HStack.stories.tsx .rw-r--r-- clertonra staff 1.0 KB Wed Feb 25 13:12:44 2026 HStack.test-helpers.ts .rw-r--r-- clerto …(truncated, 653 more chars)

Now let me search for Box component and any scrollable patterns:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages/core/src -type f -name "*Box*" -o -name "*Stack*" | grep -E "\.(tsx|ts)$"

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.stories.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaComboBox.interactions.stories.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaComboBox.stories.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaCo …(truncated, 990 more chars)

Let me search for any component that has "overflow" or "scroll" in it:

Tools used:

• Bash: grep -r "overflow-y-auto\|overflow.*scroll\|scrollable\|SidePanel\|FilterPanel" /Users/USER/workspace/doctolib/oxygen/packages/core/src --include="*.tsx" --include="*.ts" -l

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Drawer/Drawer.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Popover/Popover.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/AlphaSidePanel/AlphaSidePanel.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/AlphaSidePanel/AlphaSidePanel.stories.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/AlphaSidePanelHeader/AlphaSidePanelHeader.tsx /Users/USER/wor …(truncated, 256 more chars)

Perfect! Let me also check the overlays directory to see all available components:

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 448 B Wed Feb 25 13:12:44 2026 . drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 .. drwxr-xr-x clertonra staff 128 B Wed Feb 25 13:12:44 2026 _ModalTransition drwxr-xr-x clertonra staff 160 B Wed Feb 25 13:12:44 2026 AlphaSidePanel drwxr-xr-x clertonra staff 128 B Wed Feb 25 13:12:44 2026 AlphaSidePanelHeader drwxr-xr-x clertonra staff 160 B Wed Feb 25 13:12:44 2026 Backdrop drwxr-xr-x clertonra staff 160 B Wed Feb 25 13:12:44 2026 ContextualPopover dr …(truncated, 468 more chars)

Excellent! Now let me read the source code of the key components. Let me start with Modal, Dialog, and the SidePanel components:

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Modal/Modal.tsx

Tool results:

→ result (ok): 1 import { 2 forwardRef, 3 useRef, 4 type ReactElement, 5 type ReactEventHandler, 6 type ReactNode, 7 type SyntheticEvent, 8 } from 'react' 9 import MaterialModal from '@mui/material/Modal' 10 import classNames from 'classnames' 11 import { v4 as uuidv4 } from 'uuid' 12 import { _Transition as Transition } from '../_ModalTransition/_ModalTransition' 13 import { IconButton } from '../../actions/IconButton/v2/IconButton' 14 import { Button } from '../../actions/Button/Button' 15 import …(truncated, 7424 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Dialog/Dialog.tsx

Tool results:

→ result (ok): 1 import './Dialog.scss' 2
3 import classNames from 'classnames' 4 import type { DesignSystemIconComponent } from '@doctolib/design-system-icons' 5 import type { ReactEventHandler, ReactNode } from 'react' 6
7 import { Button } from '../../actions/Button/Button' 8 import type { IconName } from '../../dataDisplay/Icon/Icon' 9 import { Modal, type ModalProps } from '../Modal/Modal' 10 import { ModalBody } from '../ModalBody/ModalBody' 11 import { ModalFooter } from '../ModalFooter/ModalFooter' 1 …(truncated, 2750 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/AlphaSidePanel/AlphaSidePanel.tsx

Tool results:

→ result (ok): 1 import '../Backdrop/Backdrop.scss' 2
3 import type { Attributes, ReactElement, ReactEventHandler, ReactNode, SyntheticEvent } from 'react' 4 import { Children, cloneElement, forwardRef, isValidElement, useId } from 'react' 5 import classNames from 'classnames' 6 import MaterialModal from '@mui/material/Modal' 7
8 import { 9 AlphaSidePanelHeader, 10 type InternalSidePanelHeaderProps, 11 type SidePanelHeaderProps, 12 } from '../AlphaSidePanelHeader/AlphaSidePanelHeader' 13 import type { …(truncated, 5946 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/VStack.tsx

Tool results:

→ result (ok): 1 import { type CommonProps, Flex, type SpecificProps } from './private/Flex' 2 import type { GapValue } from './private/tokensHelper' 3
4 // VStack has slightly different align prop (no stretch) 5 type Alignment = Exclude<CommonProps['align'], 'stretch'> 6
7 type Props = Omit<CommonProps, 'align' | 'gap'> & 8 Pick<SpecificProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight'> & { 9 /* 10 * Space separating each child item 11 / 12 gap?: GapValue …(truncated, 876 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/HStack.tsx

Tool results:

→ result (ok): 1 import { type CommonProps, Flex, type SpecificProps } from './private/Flex' 2
3 type Props = Omit<CommonProps, 'align' | 'justify'> & 4 Pick<SpecificProps, 'width' | 'maxWidth' | 'minWidth'> & { 5 / 6 * Vertical alignment of items 7 */ 8 align?: CommonProps['align'] 9 / 10 * Horizontal distribution of items 11 / 12 justify?: CommonProps['justify'] 13 / 14 * Allow wrapping to next line when items don't fit 15 / 16 hasWrap?: Specif …(truncated, 739 more chars)

Now let me read the Flex component (which powers VStack/HStack) and check the SCSS files for scroll patterns:

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/private/Flex.tsx

Tool results:

→ result (ok): 1 import classNames from 'classnames' 2 import type { ReactNode } from 'react' 3 import styled from '@emotion/styled' 4
5 import { type DataAttribute, filterDataAttributes } from '../../common/DataAttribute/DataAttribute' 6 import { type Gap, getGapValues, getPaddingValues, type Padding } from './tokensHelper' 7 import styles from './Flex.module.css' 8
9 export const SEMANTIC_ELEMENTS = [ 10 'div', 11 'section', 12 'article', 13 'aside', 14 'header', 15 'footer', 16 'nav', 17 ' …(truncated, 4737 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/ModalBody/ModalBody.tsx

Tool results:

→ result (ok): 1 import type { ReactElement, ReactNode } from 'react' 2 import { forwardRef } from 'react' 3 import classNames from 'classnames' 4 import { usePlatform } from '../../hooks/usePlatform' 5 import { DrawerBody } from '../Drawer/Drawer' 6 import './ModalBody.scss' 7
8 type Props = { 9 alignText?: 'auto' | 'center' | 'left' | 'right' 10 children: ReactNode 11 uiStyle?: 'normal' | 'dialog' 12 disableDrawerOnMobile?: boolean 13 className?: string 14 } 15
16 export const ModalBody = forward …(truncated, 787 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/ModalFooter/ModalFooter.tsx

Tool results:

→ result (ok): 1 import type { ReactElement, ReactNode } from 'react' 2 import classNames from 'classnames' 3 import { usePlatform } from '../../hooks/usePlatform' 4 import { DrawerFooter } from '../Drawer/Drawer' 5 import './ModalFooter.scss' 6
7 type Props = { 8 children: ReactNode 9 divider?: boolean 10 padding?: boolean 11 position?: 'right' 12 uiStyle?: 'normal' | 'dialog' 13 disableDrawerOnMobile?: boolean 14 className?: string 15 } 16
17 export const ModalFooter = ({ 18 children, 19
…(truncated, 834 more chars)

Let me check the SCSS files for Modal to understand scroll behavior:

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Modal/Modal.scss

Tool results:

→ result (ok): 1 @use '../../style/variables'; 2
3 // FIXME: This is a hack to override the tokens on the monolith where old ones are still loaded 4 .dl-modal.dl-modal { 5 --oxygen-LOCAL-modal-content-background: var(--oxygen-color-primitive-white); 6 --oxygen-LOCAL-modal-header-background: var(--oxygen-color-primitive-white); 7 --oxygen-LOCAL-modal-header-color: var(--oxygen-color-semantic-neutral-prominent-stronger); 8 } 9
10 .MuiModal-root.dl-modal { 11 z-index: variables.$zindex-dialog; 12 } 13

…(truncated, 3506 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/ModalBody/ModalBody.scss

Tool results:

→ result (ok): 1 @use '../../style/variables'; 2
3 .dl-modal-content:not(.dl-modal-content-fullscreen) .dl-modal-body { 4 overflow-y: auto; 5 } 6
7 .dl-modal-body { 8 font: var(--oxygen-font-semantic-body-s-regular); 9
10 &.dl-text-body { 11 padding: (variables.$grid-unit * 2); 12 text-align: center; 13
14 &.dl-modal-body-align-left { 15 text-align: left; 16 } 17
18 &.dl-modal-body-align-center { 19 text-align: center; 20 } 21
22 @media (min-width: variables. …(truncated, 593 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/AlphaSidePanel/AlphaSidePanel.module.scss

Tool results:

→ result (ok): 1 @use '../../style/variables'; 2
3 .side-panel { 4 position: fixed !important; 5 display: flex; 6 flex-direction: row; 7 height: 100%; 8 max-height: 100vh; 9
10 :global(.dl-backdrop) { 11 z-index: variables.$zindex-panelled-modal + 1; 12 opacity: 0.5 !important; 13 right: 0; 14 position: absolute !important; 15 } 16
17 &.absolute { 18 position: absolute !important; 19 max-height: 100%; 20 } 21
22 &.max-height-vh { 23 max-height: 100vh; 24 }

…(truncated, 1785 more chars)

Perfect! Now let me check if there are any existing examples or stories that combine Modal + scrollable content:

Tools used:

• Bash: grep -r "sticky\|position.*sticky" /Users/USER/workspace/doctolib/oxygen/packages/core/src --include="*.scss" --include="*.css" -l | head -10

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/InputColor/v2/private/_CustomColorSelector.module.scss /Users/USER/workspace/doctolib/oxygen/packages/core/src/navigation/Tabs/v2/Tabs.module.scss /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/Table.scss /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/Dropdown/Dropdown.module.scss

Let me check Drawer component as well since it's used on mobile and might have relevant patterns:

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Drawer/Drawer.tsx

Tool results:

→ result (ok): 1 import './Drawer.scss' 2
3 import classNames from 'classnames' 4 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react' 5 import type { ReactNode, SyntheticEvent } from 'react' 6 import SwipeableDrawer from '@mui/material/SwipeableDrawer' 7 import { v4 as uuidv4 } from 'uuid' 8
9 import { Button, type ButtonProps } from '../../actions/Button/Button' 10 import { IconButton } from '../../actions/IconButton/IconButton' 11 import { Pill, type PillProps } from '../../dataDis …(truncated, 9573 more chars)

Tools used:

• Bash: head -150 /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Drawer/Drawer.scss

Tool results:

→ result (ok): @use '../../style/variables'; @use '../../style/focus';

// FIXME: This is a hack to override the tokens on the monolith where old ones are still loaded .dl-drawer.dl-drawer { --oxygen-LOCAL-drawer-background: var(--oxygen-color-primitive-white); --oxygen-LOCAL-drawer-shadowColor: var(--oxygen-color-semantic-neutral-opacity-subtle-base); --oxygen-LOCAL-drawer-iconAction-border: var(--oxygen-color-semantic-neutral-subtle-base); --oxygen-LOCAL-drawer-iconAction-icon-fill: var(--oxygen-colo …(truncated, 4120 more chars)

Let me also check the LayoutHelperComponents to understand Box patterns:

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/LayoutHelperComponents.tsx

Tool results:

→ result (ok): 1 import type { ReactNode } from 'react' 2 import { TOKENS } from '@doctolib/design-system-tokens/tokensCSS' 3
4 import { RadioGroup } from '../forms/RadioGroup/RadioGroup' 5 import { Select } from '../forms/Select/Select' 6
7 export const Container = ({ 8 children, 9 height = 'auto', 10 width = '100%', 11 color = 'gray', 12 }: { 13 children: ReactNode 14 height?: string 15 width?: string 16 color?: 'sky' | 'teal' | 'red' | 'gray' 17 }) => ( 18 <div 19 style={{ 20 b …(truncated, 4995 more chars)

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages/core/src -type f -name "*index*" | grep -E "overlays|layout" | head -5

Tool results:

→ result (ok): (Bash completed with no output)

Now let me check the index files to see what's exported:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages/core -name "index.ts" -o -name "index.tsx" | head -3

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/tokens/index.ts

Tools used:

• Bash: ls /Users/USER/workspace/doctolib/oxygen/packages/core/src/ | grep -E "^index"

Tool results:

→ result (ok): (Bash completed with no output)

Let me check Modal stories to understand usage patterns better:

Tools used:

• Bash: head -100 /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Modal/Modal.stories.tsx

Tool results:

→ result (ok): import type { ComponentProps } from 'react' import type { StoryObj } from '@storybook/react-vite' import { useState } from 'react'

import { Button } from '../../actions/Button/Button' import { Modal } from './Modal' import ModalA11y from './Modal.a11y.mdx' import { ModalBody } from '../ModalBody/ModalBody' import { ModalFooter } from '../ModalFooter/ModalFooter' import type { StoryConfiguration } from '@doctolib/storybook-config/types'

export default { tags: ['stage:stable'], title: 'overl …(truncated, 2628 more chars)

Perfect! Now let me compile my findings. Let me create a comprehensive summary document:

Oxygen Design System Component Exploration Complete

Based on my thorough exploration of the Oxygen design system, here's what I found:

1. Modal/Dialog Components Available

Primary Overlay Components:

• Modal (/Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Modal/Modal.tsx)
• Most general-purpose overlay component
• Supports sizes: small, medium, large, fullheight, fullscreen
• Has built-in header with optional close icon and back navigation
• Responsive: automatically converts to Drawer on mobile

• Key props: show, title, size, blocking, backdrop, onHide, disableDrawerOnMobile

• Dialog (/Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Dialog/Dialog.tsx)

• Specialized Modal wrapper for confirmation dialogs
• Composed of Modal + ModalBody + ModalFooter
• Blocking by default, no drawer on mobile

• Props: title, acceptText, dismissText, onAccept, onDismiss, destructive, loading

• AlphaSidePanel (/Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/AlphaSidePanel/AlphaSidePanel.tsx) - ALPHA/DO NOT USE

• Side panel overlay positioned on the right
• Supports sizes: small, medium, large
• Has sticky footer support via footerProps
• Exports: AlphaSidePanel, SidePanelFooter

Supporting Components:

• ModalBody (/Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/ModalBody/ModalBody.tsx)
• Wraps content inside Modal/Dialog
• Has auto scrolling: overflow-y: auto when not fullscreen

• Responsive: uses DrawerBody on mobile

• ModalFooter (/Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/ModalFooter/ModalFooter.tsx)

• Sticky footer with divider
• Optional padding prop

• Can position to right with position="right"

• Drawer (/Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Drawer/Drawer.tsx)

• Mobile equivalent of Modal/Dialog
• Bottom-positioned by default
• Has DrawerBody with overflow-y-auto class
• Has DrawerFooter component

2. Layout Primitives (Stack, Box, etc.)

Flexbox-based Layout Components:

• VStack (/Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/VStack.tsx)
• Vertical flex layout (flex-direction: column)
• Props: gap, align, justify, width, maxWidth, minWidth, height, maxHeight, minHeight

• No overflow control built-in

• HStack (/Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/HStack.tsx)

• Horizontal flex layout (flex-direction: row)
• Props: gap, align, justify, width, maxWidth, minWidth, hasWrap

• Supports flex wrapping

• Flex (/Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/private/Flex.tsx) - PRIVATE

• Powers both VStack and HStack
• Uses emotion styled-components
• Supports semantic HTML elements: div, section, article, aside, header, footer, nav, main, ul, ol, li
• Supports gap (uniform or x/y split) and padding (uniform, x/y split, or individual sides)
• NOT exported as public API

Helper Components:

• Box (/Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/LayoutHelperComponents.tsx)
• Only a Storybook helper component for documentation/visualization (colored borders for layout demonstration)
• Not meant for production use

• Just a wrapper div with styles

• Container - Also a Storybook helper component only

3. Scrollable Container Patterns

Explicit scroll implementations found:

1. Modal Body scrolling (Modal.scss): - .dl-modal-content { overflow-y: auto; max-height: calc(100vh - 32px); } - .dl-modal-content.dl-modal-content-fullheight .dl-modal-body { height: 100%; overflow-y: auto; } - Uses flex-direction: column to enable scroll

2. AlphaSidePanel scrolling (AlphaSidePanel.module.scss): - .content { overflow: auto; height: 100%; max-height: 100%; } - Flex column layout with footer as flex-grow: 0 - Content main div takes full height

3. Drawer Body scrolling (Drawer.tsx + Drawer.scss): - Uses class dl-overflow-y-auto and dl-full-height - Shadow effect at bottom: radial-gradient(...) at 50% 100% for visual scroll indicator

4. Modal fullheight pattern (Modal.scss): - Header: sticky at top (no explicit position: sticky, but structurally fixed via flex) - Body: flex-grow with overflow-y-auto - Footer: fixed height at bottom

4. Sticky Header + Scrollable Content + Sticky Footer Pattern

Currently implemented in Modal and AlphaSidePanel:

Modal structure:
├─ Modal (overflow-y: auto on container for centering)
└─ modal-content (flex-direction: column, max-height: 100vh - margin)
   ├─ modal-header (fixed height, margin-bottom)
   ├─ modal-body (overflow-y: auto, flex-grow)
   └─ modal-footer (fixed height, sticky via footer positioning)

AlphaSidePanel structure:
├─ side-panel (height: 100%)
└─ content (flex-direction: column, height: 100%, overflow: auto)
   ├─ content-main (height: 100%, scrollable via parent)
   └─ footer (flex-grow: 0, height: 7.2rem, Divider + content)

Key CSS pattern for sticky layouts:

.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header { /* fixed height */ }
.scrollable-body { 
  overflow-y: auto;
  flex: 1; /* grows to fill */
}
.footer { 
  flex-grow: 0; /* stays at bottom */
  height: /* fixed */;
}

5. Existing Scroll/Overflow-Related Patterns

Files with scroll implementations: - /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Modal/Modal.scss - /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/ModalBody/ModalBody.scss - /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/AlphaSidePanel/AlphaSidePanel.module.scss - /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Drawer/Drawer.tsx (via CSS classes) - /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/Table.scss (also has sticky patterns) - /Users/USER/workspace/doctolib/oxygen/packages/core/src/navigation/Tabs/v2/Tabs.module.scss (sticky tabs)

Recommendation for NHRDocumentList Container

For hosting a scrollable list of documents in a modal:

1. Use Modal component as the main container: - Set size="fullheight" for a tall scrollable modal - Pass your document list content to ModalBody (which has auto scroll) - Optional ModalFooter for actions

2. OR use AlphaSidePanel if right-side panel is preferred (currently alpha, check before use)

3. Structure inside ModalBody: - Use VStack for vertical layout - No need to add explicit overflow - ModalBody handles it via .overflow-y-auto - Keep ModalBody and ModalFooter separate for proper sticky footer

4. CSS approach if custom: - Flex column container with max-height: 100vh - Body section with overflow-y: auto; flex: 1 - Footer section with flex-grow: 0

All key component files are ready to review and understand the architecture!