fixed open-by-default issue

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

Author: maximiliani

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

@@ -32,6 +32,8 @@ pid-collapsible.resize-both {
   max-width: 100% !important; /* Prevent exceeding parent container */
   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 */
 }
 
 /*

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

@@ -338,6 +338,7 @@ export class PidCollapsible {
             if (!this.currentHeight || this.currentHeight === `${this.lineHeight}px`) {
               this.currentHeight = this.initialHeight || `${optimalHeight}px`;
             } else {
+              // Set the height to exactly match the content height plus padding
               this.currentHeight = `${optimalHeight}px`;
             }
 

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

@@ -193,11 +193,20 @@ export class PidComponent {
     // Initialize component ID for references
     this.ensureComponentId();
 
-    // Ensure collapsible gets proper initial width after load
+    // Ensure collapsible gets proper initial width and open state after load
     setTimeout(() => {
       const collapsible = this.el.querySelector('pid-collapsible');
-      if (collapsible && typeof (collapsible as any).recalculateContentDimensions === 'function') {
-        (collapsible as any).recalculateContentDimensions();
+      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();
+        }
       }
     }, 0);
   }