feat(dees-modal): Add mobileFullscreen option to modals for full-screen mobile support

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2025-06-26 - 1.10.0 - feat(dees-modal)
+Add mobileFullscreen option to modals for full-screen mobile support
+
+- Introduced a new boolean property 'mobileFullscreen' in ts_web/elements/dees-modal.ts
+- Updated modal CSS under the media query to apply 'mobile-fullscreen' class, allowing full viewport modals on mobile devices
+- Extended modal style rules to include adjustments for margin, border-radius, and maximum heights on smaller screens
+
 ## 2025-06-26 - 1.9.9 - fix(dees-input-multitoggle, dees-input-typelist)
 Replace dynamic import with static import for demo functions in dees-input-multitoggle and dees-input-typelist
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.9.9',
+  version: '1.10.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-modal.ts

@@ -42,6 +42,7 @@ export class DeesModal extends DeesElement {
     showCloseButton?: boolean;
     showHelpButton?: boolean;
     onHelp?: () => void | Promise<void>;
+    mobileFullscreen?: boolean;
   }) {
     const body = document.body;
     const modal = new DeesModal();
@@ -54,6 +55,7 @@ export class DeesModal extends DeesElement {
     if (optionsArg.showCloseButton !== undefined) modal.showCloseButton = optionsArg.showCloseButton;
     if (optionsArg.showHelpButton !== undefined) modal.showHelpButton = optionsArg.showHelpButton;
     if (optionsArg.onHelp) modal.onHelp = optionsArg.onHelp;
+    if (optionsArg.mobileFullscreen !== undefined) modal.mobileFullscreen = optionsArg.mobileFullscreen;
     modal.windowLayer = await DeesWindowLayer.createAndShow({
       blur: true,
     });
@@ -101,6 +103,9 @@ export class DeesModal extends DeesElement {
   @property({ attribute: false })
   public onHelp: () => void | Promise<void>;
   
+  @property({ type: Boolean })
+  public mobileFullscreen: boolean = false;
+  
   @state()
   private modalZIndex: number = 1000;
 
@@ -132,6 +137,7 @@ export class DeesModal extends DeesElement {
         transform: translateY(0px) scale(0.95);
         opacity: 0;
         min-height: 120px;
+        max-height: calc(100vh - 40px);
         background: ${cssManager.bdTheme('#ffffff', '#111')};
         border-radius: 8px;
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
@@ -139,6 +145,8 @@ export class DeesModal extends DeesElement {
         overflow: hidden;
         box-shadow: ${cssManager.bdTheme('0px 2px 10px rgba(0, 0, 0, 0.1)', '0px 2px 5px rgba(0, 0, 0, 0.5)')};
         margin: 20px;
+        display: flex;
+        flex-direction: column;
       }
 
       /* Width variations */
@@ -165,6 +173,25 @@ export class DeesModal extends DeesElement {
           width: calc(100vw - 40px) !important;
           max-width: none !important;
         }
+        
+        /* Allow full height on mobile when content needs it */
+        .modalContainer {
+          padding: 10px;
+        }
+        
+        .modal {
+          margin: 10px;
+          max-height: calc(100vh - 20px);
+        }
+        
+        /* Full screen mode on mobile */
+        .modal.mobile-fullscreen {
+          width: 100vw !important;
+          height: 100vh !important;
+          max-height: 100vh !important;
+          margin: 0;
+          border-radius: 0;
+        }
       }
 
       .modal.show {
@@ -179,6 +206,7 @@ export class DeesModal extends DeesElement {
 
       .modal .heading {
         height: 40px;
+        min-height: 40px;
         font-family: 'Geist Sans', sans-serif;
         display: flex;
         align-items: center;
@@ -186,6 +214,7 @@ export class DeesModal extends DeesElement {
         padding: 0 12px;
         border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
         position: relative;
+        flex-shrink: 0;
       }
 
       .modal .heading .header-buttons {
@@ -237,6 +266,9 @@ export class DeesModal extends DeesElement {
 
       .modal .content {
         padding: 16px;
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
       }
       .modal .bottomButtons {
         display: flex;
@@ -245,6 +277,7 @@ export class DeesModal extends DeesElement {
         justify-content: flex-end;
         gap: 8px;
         padding: 8px;
+        flex-shrink: 0;
       }
 
       .modal .bottomButtons .bottomButton {
@@ -291,6 +324,7 @@ export class DeesModal extends DeesElement {
     const customWidth = typeof this.width === 'number' ? `${this.width}px` : '';
     const maxWidthStyle = this.maxWidth ? `${this.maxWidth}px` : '';
     const minWidthStyle = this.minWidth ? `${this.minWidth}px` : '';
+    const mobileFullscreenClass = this.mobileFullscreen ? 'mobile-fullscreen' : '';
 
     return html`
       <style>
@@ -299,7 +333,7 @@ export class DeesModal extends DeesElement {
         ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <div class="modal ${widthClass}">
+        <div class="modal ${widthClass} ${mobileFullscreenClass}">
           <div class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">