fixed resizing for Safari

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

Author: maximiliani

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

@@ -52,6 +52,8 @@ pid-collapsible.resize-both {
 
     pid-collapsible.resize-both {
       -webkit-resize: both !important;
+      resize: both !important;
+      overflow: auto !important;
     }
   }
 }
@@ -145,6 +147,30 @@ pid-collapsible.resize-both::after {
     height: 0;
     visibility: hidden;
   }
+
+  /* Ensure resize works in Safari */
+  pid-collapsible.resize-both {
+    position: relative;
+    -webkit-resize: both !important;
+    resize: both !important;
+    overflow: auto !important;
+    max-width: 100% !important;
+    max-height: 90vh !important;
+    display: block !important;
+  }
+
+  /* Enhanced resize handle visibility for Safari */
+  pid-collapsible.resize-both::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 15px;
+    height: 15px;
+    cursor: nwse-resize;
+    background: linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 50%);
+    z-index: 10;
+  }
 }
 
 /*

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

@@ -26,4 +26,11 @@ pid-component {
     clear: both;
     height: 0;
   }
+
+  /* Ensure resize functionality in Safari */
+  pid-component pid-collapsible.resize-both {
+    -webkit-resize: both !important;
+    resize: both !important;
+    overflow: auto !important;
+  }
 }

packages/stencil-library/tailwind.config.ts

@@ -7,6 +7,9 @@ export default {
     extend: {
       resize: {
         both: 'both',
+        none: 'none',
+        x: 'horizontal',
+        y: 'vertical',
       },
     },
   },