diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock new file mode 100644 index 0000000..5b1d84e --- /dev/null +++ b/.claude/scheduled_tasks.lock @@ -0,0 +1 @@ +{"sessionId":"4b0f0a7f-f187-40a3-a38b-cb9a7e877011","pid":3110692,"acquiredAt":1775914414249} \ No newline at end of file diff --git a/changelog.md b/changelog.md index 58bc459..27e5d2f 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-04-11 - 3.71.1 - fix(dees-modal) +move modal content scrolling into dees-tile so long content stays scrollable with pinned header and actions + +- Update dees-tile content area to use vertical scrolling when constrained by a max-height while keeping horizontal overflow clipped. +- Remove duplicate scrolling styles from dees-modal and rely on the shared tile container behavior. +- Add modal demo cases for long article, list, and form content to verify internal scrolling. + ## 2026-04-11 - 3.71.0 - feat(dees-stepper) add footer menu actions with form-aware step validation diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 6b03c74..3b86e4f 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.71.0', + version: '3.71.1', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-layout/dees-tile/dees-tile.ts b/ts_web/elements/00group-layout/dees-tile/dees-tile.ts index 55ec1f2..ef0e851 100644 --- a/ts_web/elements/00group-layout/dees-tile/dees-tile.ts +++ b/ts_web/elements/00group-layout/dees-tile/dees-tile.ts @@ -87,14 +87,24 @@ export class DeesTile extends DeesElement { color: var(--dees-color-text-secondary); } - /* --- Content: the rounded inset --- */ + /* --- Content: the rounded inset --- + Uses overflow-y: auto so that when a consumer (e.g. dees-modal) caps + the tile with max-height, long content scrolls inside the tile + instead of being clipped. For consumers without max-height + (e.g. dees-stepper), the tile grows with content and the scroll + never activates. Horizontal overflow stays clipped to preserve the + rounded corners. */ .tile-content { flex: 1; position: relative; border-radius: 8px; border-top: 1px solid var(--dees-color-border-subtle); border-bottom: 1px solid var(--dees-color-border-subtle); - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-width: thin; + scrollbar-color: var(--dees-color-scrollbar-thumb) transparent; } .tile-content.no-footer { diff --git a/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts b/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts index 709dc40..34b0beb 100644 --- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts +++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts @@ -352,5 +352,80 @@ export const demoFunc = () => html` }); }}>Test Responsive + +
When content exceeds the modal's max-height (calc(100vh - 80px)), the tile caps at that height and the content area scrolls inside. The heading and bottom buttons stay pinned.