fixed resizing for chrome and firefox

Signed-off-by: Maximilian Inckmann <[email protected]>

Author: maximiliani

packages/stencil-library/src/components/pid-collapsible/collapsible.css

@@ -30,10 +30,12 @@ pid-collapsible.resize-both {
   resize: both !important;
   overflow: auto !important;
   max-width: 100% !important; /* Prevent exceeding parent container */
+  max-height: 90vh !important; /* Prevent excessive vertical sizing */
   will-change: width, height; /* Hint to the browser to optimize for resizing */
   transition: none !important; /* Disable transitions during resize for better performance */
-  min-height: fit-content; /* Ensure the component expands to fit its content */
-  min-width: fit-content; /* Ensure the component expands to fit its content */
+  min-height: min-content !important; /* Ensure the component doesn't shrink below content */
+  min-width: min-content !important; /* Ensure the component doesn't shrink below content */
+  height: fit-content !important; /* Set initial height to fit content exactly */
 }
 
 /*

packages/stencil-library/src/components/pid-collapsible/pid-collapsible.tsx

@@ -167,9 +167,21 @@ export class PidCollapsible {
   componentWillLoad() {
     // Initialize state from props
     this.expanded = this.open;
-    // Default to 75% width if no initial width is provided
-    this.currentWidth = this.initialWidth || '75%'; // Changed from DEFAULT_WIDTH to use 75% (w-3/4)
-    this.currentHeight = this.initialHeight || CONSTANTS.DEFAULT_HEIGHT;
+
+    // Initialize dimensions but delay actual calculation until content is rendered
+    if (this.initialWidth) {
+      this.currentWidth = this.initialWidth;
+    } else {
+      // Default to 75% width if no initial width is provided
+      this.currentWidth = '75%';
+    }
+
+    if (this.initialHeight) {
+      this.currentHeight = this.initialHeight;
+    } else {
+      // Use default height initially, will be recalculated after content renders
+      this.currentHeight = CONSTANTS.DEFAULT_HEIGHT;
+    }
 
     // Initialize dark mode
     this.initializeDarkMode();
@@ -181,6 +193,15 @@ export class PidCollapsible {
     this.addBrowserCompatibilityListeners();
     this.addComponentEventListeners();
 
+    // When component is initially open, ensure dimensions are properly calculated after rendering
+    if (this.open) {
+      // Use a small delay to ensure the DOM is fully rendered
+      setTimeout(() => {
+        // Force recalculation of dimensions for open components
+        this.recalculateContentDimensions();
+      }, 50);
+    }
+
     // Add clearfix for Safari - prevent text flow issues
     if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
       this.el.style.display = 'inline-block';
@@ -593,12 +614,14 @@ export class PidCollapsible {
    */
   private calculateContentDimensions() {
     const contentElement = this.el.querySelector('.flex-grow');
-    const contentWidth = contentElement?.scrollWidth || CONSTANTS.MIN_WIDTH;
-    const contentHeight = contentElement?.scrollHeight || CONSTANTS.MIN_HEIGHT;
+    // Get the actual visible content width/height (not just scroll dimensions)
+    const contentWidth = contentElement ? Math.max((contentElement as HTMLElement).offsetWidth, contentElement?.scrollWidth || 0) : CONSTANTS.MIN_WIDTH;
+    const contentHeight = contentElement ? Math.max((contentElement as HTMLElement).offsetHeight, contentElement?.scrollHeight || 0) : CONSTANTS.MIN_HEIGHT;
 
     // Add padding for better appearance, plus footer height if footer is shown
     const footerHeight = this.showFooter ? CONSTANTS.FOOTER_HEIGHT : 0;
     const maxWidth = contentWidth + CONSTANTS.PADDING_WIDTH;
+    // Use actual content height rather than adding arbitrary padding
     const maxHeight = contentHeight + CONSTANTS.PADDING_HEIGHT + footerHeight;
 
     return { contentWidth, contentHeight, maxWidth, maxHeight };
@@ -614,15 +637,34 @@ export class PidCollapsible {
 
     const { contentWidth, contentHeight, maxWidth, maxHeight } = dimensions;
 
-    // Always set exact content dimensions to prevent resizing beyond content
-    // Ensure width is within minimum and maximum bounds
-    const optimalWidth = Math.min(Math.max(contentWidth + CONSTANTS.PADDING_WIDTH, CONSTANTS.MIN_WIDTH), maxWidth);
-    this.currentWidth = `${optimalWidth}px`;
+    // Calculate initial width based on content but prefer initialWidth if provided
+    let optimalWidth;
+    if (this.initialWidth) {
+      // Use initialWidth directly if provided
+      this.currentWidth = this.initialWidth;
+    } else {
+      // Calculate a content-based width with minimal padding
+      optimalWidth = Math.min(Math.max(contentWidth + CONSTANTS.PADDING_WIDTH, CONSTANTS.MIN_WIDTH), maxWidth);
+      // Default to 75% if we don't have specific content dimensions
+      this.currentWidth = contentWidth > 0 ? `${optimalWidth}px` : '75%';
+    }
 
-    // Calculate optimal height including padding and footer if needed
+    // Calculate optimal height based on actual content
     const footerHeight = this.showFooter ? CONSTANTS.FOOTER_HEIGHT : 0;
-    const optimalHeight = Math.min(Math.max(contentHeight + CONSTANTS.PADDING_HEIGHT + footerHeight, CONSTANTS.MIN_HEIGHT), maxHeight);
-    this.currentHeight = `${optimalHeight}px`;
+
+    // Use more precise content height calculation to prevent extra space
+    // Add minimal padding to prevent content being cut off
+    const minPadding = 20; // Minimal padding to prevent content being cut off
+    const calculatedHeight = contentHeight + minPadding + footerHeight;
+
+    // Use initialHeight if provided, otherwise use calculated height
+    if (this.initialHeight) {
+      this.currentHeight = this.initialHeight;
+    } else {
+      // Ensure height is between min height and max height constraints
+      const optimalHeight = Math.min(Math.max(calculatedHeight, CONSTANTS.MIN_HEIGHT), maxHeight);
+      this.currentHeight = `${optimalHeight}px`;
+    }
 
     // Store these dimensions for future reference
     this.lastExpandedWidth = this.currentWidth;
@@ -634,6 +676,14 @@ export class PidCollapsible {
       this.el.style.width = this.currentWidth;
       this.el.style.height = this.currentHeight;
 
+      // Set min-height/min-width to prevent resizing smaller than content
+      this.el.style.minHeight = `${Math.max(calculatedHeight, CONSTANTS.MIN_HEIGHT)}px`;
+      this.el.style.minWidth = `${CONSTANTS.MIN_WIDTH}px`;
+
+      // Also set max-height/max-width to prevent excessive resizing
+      this.el.style.maxHeight = `${maxHeight}px`;
+      this.el.style.maxWidth = `${maxWidth}px`;
+
       // Remove the optimization class after updates are applied
       this.el.classList.remove('resizing');
     });

packages/stencil-library/src/components/pid-component/pid-component.css

@@ -32,5 +32,15 @@ pid-component {
     -webkit-resize: both !important;
     resize: both !important;
     overflow: auto !important;
+    max-height: fit-content !important; /* Fix Safari excessive height issue */
+    height: fit-content !important; /* Ensure height matches content in Safari */
+  }
+
+  /* Fix for high/narrow preview when openByDefault is set */
+  pid-component[openbydefault] pid-collapsible {
+    height: fit-content !important;
+    min-height: fit-content !important;
+    width: auto !important;
+    min-width: 75% !important;
   }
 }

packages/stencil-library/src/components/pid-component/pid-component.tsx

@@ -194,21 +194,30 @@ export class PidComponent {
     this.ensureComponentId();
 
     // Ensure collapsible gets proper initial width and open state after load
+    // Use a longer delay to ensure DOM is fully rendered before recalculating
     setTimeout(() => {
       const collapsible = this.el.querySelector('pid-collapsible');
       if (collapsible) {
         // Set open state explicitly based on openByDefault property
         if (this.openByDefault) {
           (collapsible as any).open = true;
           (collapsible as any).expanded = true;
-        }
 
-        // Recalculate dimensions after setting open state
-        if (typeof (collapsible as any).recalculateContentDimensions === 'function') {
-          (collapsible as any).recalculateContentDimensions();
+          // When openByDefault is true, make sure the display correctly fills the space
+          // by giving the DOM time to render before recalculating dimensions
+          setTimeout(() => {
+            if (typeof (collapsible as any).recalculateContentDimensions === 'function') {
+              (collapsible as any).recalculateContentDimensions();
+            }
+          }, 100);
+        } else {
+          // For collapsed state, still recalculate dimensions
+          if (typeof (collapsible as any).recalculateContentDimensions === 'function') {
+            (collapsible as any).recalculateContentDimensions();
+          }
         }
       }
-    }, 0);
+    }, 50); // Increase initial timeout to ensure proper rendering
   }
 
   /**