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 + +
+

Scrollable Content

+

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.

+
+ { + DeesModal.createAndShow({ + heading: 'Long Article', + width: 'medium', + content: html` +

Lorem ipsum dolor sit amet

+ ${Array.from({ length: 40 }, (_, i) => html` +

+ § ${i + 1}. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ `)} + `, + menuOptions: [{ + name: 'Cancel', + action: async (modal) => modal!.destroy() + }, { + name: 'Accept', + action: async (modal) => modal!.destroy() + }], + }); + }}>Long Article
+ + { + DeesModal.createAndShow({ + heading: 'Long List', + width: 'small', + content: html` +

Selected items:

+
    + ${Array.from({ length: 80 }, (_, i) => html` +
  • Item ${i + 1} — option label
  • + `)} +
+ `, + menuOptions: [{ + name: 'Done', + action: async (modal) => modal!.destroy() + }], + }); + }}>Long List
+ + { + DeesModal.createAndShow({ + heading: 'Tall Form', + width: 'medium', + content: html` + + ${Array.from({ length: 25 }, (_, i) => html` + + `)} + + `, + menuOptions: [{ + name: 'Cancel', + action: async (modal) => modal!.destroy() + }, { + name: 'Submit', + action: async (modal) => modal!.destroy() + }], + }); + }}>Tall Form +
+
` \ No newline at end of file diff --git a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts index 84c0460..57c52a4 100644 --- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts +++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts @@ -271,13 +271,6 @@ export class DeesModal extends DeesElement { font-size: 14px; } - .content { - overflow-y: auto; - overflow-x: hidden; - overscroll-behavior: contain; - scrollbar-width: thin; - scrollbar-color: var(--dees-color-scrollbar-thumb) transparent; - } .bottomButtons { display: flex; flex-direction: row;