fix(dees-modal): move modal content scrolling into dees-tile so long content stays scrollable with pinned header and actions

.claude/scheduled_tasks.lock

@@ -0,0 +1 @@
+{"sessionId":"4b0f0a7f-f187-40a3-a38b-cb9a7e877011","pid":3110692,"acquiredAt":1775914414249}

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
 

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.'
 }

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 {

ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts

@@ -352,5 +352,80 @@ export const demoFunc = () => html`
         });
       }}>Test Responsive</dees-button>
     </div>
+
+    <div class="demo-section">
+      <h3>Scrollable Content</h3>
+      <p>When content exceeds the modal's max-height (<code>calc(100vh - 80px)</code>), the tile caps at that height and the content area scrolls inside. The heading and bottom buttons stay pinned.</p>
+      <div class="button-grid">
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Long Article',
+            width: 'medium',
+            content: html`
+              <h4 style="margin-top: 0;">Lorem ipsum dolor sit amet</h4>
+              ${Array.from({ length: 40 }, (_, i) => html`
+                <p>
+                  <strong>§ ${i + 1}.</strong>
+                  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.
+                </p>
+              `)}
+            `,
+            menuOptions: [{
+              name: 'Cancel',
+              action: async (modal) => modal!.destroy()
+            }, {
+              name: 'Accept',
+              action: async (modal) => modal!.destroy()
+            }],
+          });
+        }}>Long Article</dees-button>
+
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Long List',
+            width: 'small',
+            content: html`
+              <p>Selected items:</p>
+              <ul style="padding-left: 20px; margin: 0;">
+                ${Array.from({ length: 80 }, (_, i) => html`
+                  <li style="padding: 4px 0;">Item ${i + 1} — option label</li>
+                `)}
+              </ul>
+            `,
+            menuOptions: [{
+              name: 'Done',
+              action: async (modal) => modal!.destroy()
+            }],
+          });
+        }}>Long List</dees-button>
+
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Tall Form',
+            width: 'medium',
+            content: html`
+              <dees-form>
+                ${Array.from({ length: 25 }, (_, i) => html`
+                  <dees-input-text .label=${`Field ${i + 1}`}></dees-input-text>
+                `)}
+              </dees-form>
+            `,
+            menuOptions: [{
+              name: 'Cancel',
+              action: async (modal) => modal!.destroy()
+            }, {
+              name: 'Submit',
+              action: async (modal) => modal!.destroy()
+            }],
+          });
+        }}>Tall Form</dees-button>
+      </div>
+    </div>
   </div>
 `

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;