Skip to content

Commit c833c6a

Browse files
maximilianimaximiliani
committed
fixed resizing for firefox and chrome
Signed-off-by: Maximilian Inckmann <[email protected]>
1 parent f361704 commit c833c6a

File tree

5 files changed

+60
-127
lines changed

5 files changed

+60
-127
lines changed

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

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,8 @@ pid-collapsible.resize-both {
3030
resize: both !important;
3131
overflow: auto !important;
3232
max-width: 100% !important; /* Prevent exceeding parent container */
33-
max-height: 90vh !important; /* Prevent excessive vertical sizing */
3433
will-change: width, height; /* Hint to the browser to optimize for resizing */
3534
transition: none !important; /* Disable transitions during resize for better performance */
36-
min-height: min-content !important; /* Ensure the component doesn't shrink below content */
37-
min-width: min-content !important; /* Ensure the component doesn't shrink below content */
38-
height: fit-content !important; /* Set initial height to fit content exactly */
3935
}
4036

4137
/*
@@ -135,7 +131,6 @@ pid-collapsible.resize-both::after {
135131
display: inline-block;
136132
vertical-align: top;
137133
margin-bottom: 1px; /* This tiny margin helps with layout stability */
138-
width: auto !important; /* Ensure width is set correctly for Safari */
139134
}
140135

141136
/* Optimization class for resize operations */
@@ -153,38 +148,36 @@ pid-collapsible.resize-both::after {
153148
visibility: hidden;
154149
}
155150

156-
/* Ensure resize works in Safari */
157-
pid-collapsible.resize-both {
158-
position: relative;
159-
-webkit-resize: both !important;
160-
resize: both !important;
161-
overflow: auto !important;
162-
max-width: 100% !important;
163-
max-height: 90vh !important;
164-
display: block !important;
165-
}
166-
167-
/* Enhanced resize handle visibility for Safari */
168-
pid-collapsible.resize-both::after {
169-
content: '';
170-
position: absolute;
171-
bottom: 0;
172-
right: 0;
173-
width: 15px;
174-
height: 15px;
175-
cursor: nwse-resize;
176-
background: linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 50%);
177-
z-index: 10;
178-
}
179-
180-
/* Special handling for open-by-default components in Safari */
181-
pid-collapsible[open=true], pid-collapsible[openbydefault=true] {
182-
height: fit-content !important;
183-
width: auto !important;
184-
min-width: 300px !important;
185-
resize: both !important;
186-
overflow: auto !important;
187-
}
151+
/*!* Ensure resize works in Safari *!*/
152+
/*pid-collapsible.resize-both {*/
153+
/* position: relative;*/
154+
/* -webkit-resize: both !important;*/
155+
/* resize: both !important;*/
156+
/* overflow: auto !important;*/
157+
/* max-width: 100% !important;*/
158+
/* max-height: 90vh !important;*/
159+
/* display: block !important;*/
160+
/*}*/
161+
/*!* Enhanced resize handle visibility for Safari *!*/
162+
/*pid-collapsible.resize-both::after {*/
163+
/* content: '';*/
164+
/* position: absolute;*/
165+
/* bottom: 0;*/
166+
/* right: 0;*/
167+
/* width: 15px;*/
168+
/* height: 15px;*/
169+
/* cursor: nwse-resize;*/
170+
/* background: linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 50%);*/
171+
/* z-index: 10;*/
172+
/*}*/
173+
/*!* Special handling for open-by-default components in Safari *!*/
174+
/*pid-collapsible[open=true], pid-collapsible[openbydefault=true] {*/
175+
/* height: fit-content !important;*/
176+
/* width: auto !important;*/
177+
/* min-width: 300px !important;*/
178+
/* resize: both !important;*/
179+
/* overflow: auto !important;*/
180+
/*}*/
188181
}
189182

190183
/*

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

Lines changed: 25 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -135,12 +135,7 @@ export class PidCollapsible {
135135
this.updateAppearance();
136136

137137
// When open, ensure content dimensions are properly calculated
138-
if (this.open) {
139-
// Use setTimeout to ensure DOM is updated before recalculating
140-
setTimeout(() => {
141-
this.recalculateContentDimensions();
142-
}, 0);
143-
}
138+
if (this.open) this.recalculateContentDimensions();
144139
}
145140

146141
/**
@@ -152,20 +147,9 @@ export class PidCollapsible {
152147
}
153148

154149
componentWillLoad() {
155-
// Initialize dimensions but delay actual calculation until content is rendered
156-
if (this.initialWidth) {
157-
this.currentWidth = this.initialWidth;
158-
} else {
159-
// Default to 75% width if no initial width is provided
160-
this.currentWidth = '75%';
161-
}
162-
163-
if (this.initialHeight) {
164-
this.currentHeight = this.initialHeight;
165-
} else {
166-
// Use default height initially, will be recalculated after content renders
167-
this.currentHeight = CONSTANTS.DEFAULT_HEIGHT;
168-
}
150+
// Default to 75% width if no initial width is provided
151+
this.currentWidth = this.initialWidth || '75%'; // Changed from DEFAULT_WIDTH to use 75% (w-3/4)
152+
this.currentHeight = this.initialHeight || CONSTANTS.DEFAULT_HEIGHT;
169153

170154
// Initialize dark mode
171155
this.initializeDarkMode();
@@ -177,17 +161,17 @@ export class PidCollapsible {
177161
this.addBrowserCompatibilityListeners();
178162
this.addComponentEventListeners();
179163

180-
// When component is initially open, ensure dimensions are properly calculated after rendering
181-
if (this.open) {
182-
// // Make sure expanded state is set correctly for open components
183-
// this.open = true;
184-
185-
// Use a small delay to ensure the DOM is fully rendered
186-
setTimeout(() => {
187-
// Force recalculation of dimensions for open components
188-
this.recalculateContentDimensions();
189-
}, 100);
190-
}
164+
// // When component is initially open, ensure dimensions are properly calculated after rendering
165+
// if (this.open) {
166+
// // // Make sure expanded state is set correctly for open components
167+
// // this.open = true;
168+
//
169+
// // Use a small delay to ensure the DOM is fully rendered
170+
// setTimeout(() => {
171+
// // Force recalculation of dimensions for open components
172+
// this.recalculateContentDimensions();
173+
// }, 100);
174+
// }
191175

192176
// Add clearfix for Safari - prevent text flow issues
193177
if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
@@ -346,7 +330,6 @@ export class PidCollapsible {
346330
if (!this.currentHeight || this.currentHeight === `${this.lineHeight}px`) {
347331
this.currentHeight = this.initialHeight || `${optimalHeight}px`;
348332
} else {
349-
// Set the height to exactly match the content height plus padding
350333
this.currentHeight = `${optimalHeight}px`;
351334
}
352335

@@ -601,14 +584,12 @@ export class PidCollapsible {
601584
*/
602585
private calculateContentDimensions() {
603586
const contentElement = this.el.querySelector('.flex-grow');
604-
// Get the actual visible content width/height (not just scroll dimensions)
605-
const contentWidth = contentElement ? Math.max((contentElement as HTMLElement).offsetWidth, contentElement?.scrollWidth || 0) : CONSTANTS.MIN_WIDTH;
606-
const contentHeight = contentElement ? Math.max((contentElement as HTMLElement).offsetHeight, contentElement?.scrollHeight || 0) : CONSTANTS.MIN_HEIGHT;
587+
const contentWidth = contentElement?.scrollWidth || CONSTANTS.MIN_WIDTH;
588+
const contentHeight = contentElement?.scrollHeight || CONSTANTS.MIN_HEIGHT;
607589

608590
// Add padding for better appearance, plus footer height if footer is shown
609591
const footerHeight = this.showFooter ? CONSTANTS.FOOTER_HEIGHT : 0;
610592
const maxWidth = contentWidth + CONSTANTS.PADDING_WIDTH;
611-
// Use actual content height rather than adding arbitrary padding
612593
const maxHeight = contentHeight + CONSTANTS.PADDING_HEIGHT + footerHeight;
613594

614595
return { contentWidth, contentHeight, maxWidth, maxHeight };
@@ -624,34 +605,15 @@ export class PidCollapsible {
624605

625606
const { contentWidth, contentHeight, maxWidth, maxHeight } = dimensions;
626607

627-
// Calculate initial width based on content but prefer initialWidth if provided
628-
let optimalWidth;
629-
if (this.initialWidth) {
630-
// Use initialWidth directly if provided
631-
this.currentWidth = this.initialWidth;
632-
} else {
633-
// Calculate a content-based width with minimal padding
634-
optimalWidth = Math.min(Math.max(contentWidth + CONSTANTS.PADDING_WIDTH, CONSTANTS.MIN_WIDTH), maxWidth);
635-
// Default to 75% if we don't have specific content dimensions
636-
this.currentWidth = contentWidth > 0 ? `${optimalWidth}px` : '75%';
637-
}
608+
// Always set exact content dimensions to prevent resizing beyond content
609+
// Ensure width is within minimum and maximum bounds
610+
const optimalWidth = Math.min(Math.max(contentWidth + CONSTANTS.PADDING_WIDTH, CONSTANTS.MIN_WIDTH), maxWidth);
611+
this.currentWidth = `${optimalWidth}px`;
638612

639-
// Calculate optimal height based on actual content
613+
// Calculate optimal height including padding and footer if needed
640614
const footerHeight = this.showFooter ? CONSTANTS.FOOTER_HEIGHT : 0;
641-
642-
// Use more precise content height calculation to prevent extra space
643-
// Add minimal padding to prevent content being cut off
644-
const minPadding = 20; // Minimal padding to prevent content being cut off
645-
const calculatedHeight = contentHeight + minPadding + footerHeight;
646-
647-
// Use initialHeight if provided, otherwise use calculated height
648-
if (this.initialHeight) {
649-
this.currentHeight = this.initialHeight;
650-
} else {
651-
// Ensure height is between min height and max height constraints
652-
const optimalHeight = Math.min(Math.max(calculatedHeight, CONSTANTS.MIN_HEIGHT), maxHeight);
653-
this.currentHeight = `${optimalHeight}px`;
654-
}
615+
const optimalHeight = Math.min(Math.max(contentHeight + CONSTANTS.PADDING_HEIGHT + footerHeight, CONSTANTS.MIN_HEIGHT), maxHeight);
616+
this.currentHeight = `${optimalHeight}px`;
655617

656618
// Store these dimensions for future reference
657619
this.lastExpandedWidth = this.currentWidth;
@@ -663,14 +625,6 @@ export class PidCollapsible {
663625
this.el.style.width = this.currentWidth;
664626
this.el.style.height = this.currentHeight;
665627

666-
// Set min-height/min-width to prevent resizing smaller than content
667-
this.el.style.minHeight = `${Math.max(calculatedHeight, CONSTANTS.MIN_HEIGHT)}px`;
668-
this.el.style.minWidth = `${CONSTANTS.MIN_WIDTH}px`;
669-
670-
// Also set max-height/max-width to prevent excessive resizing
671-
this.el.style.maxHeight = `${maxHeight}px`;
672-
this.el.style.maxWidth = `${maxWidth}px`;
673-
674628
// Remove the optimization class after updates are applied
675629
this.el.classList.remove('resizing');
676630
});
@@ -807,9 +761,7 @@ export class PidCollapsible {
807761

808762
// Ensure consistent state and reset flag
809763
setTimeout(() => {
810-
if (details.open !== this.open) {
811-
details.open = this.open;
812-
}
764+
details.open = this.open;
813765
setTimeout(() => {
814766
this.isToggling = false;
815767
}, 100);

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,5 @@ pid-component {
3232
-webkit-resize: both !important;
3333
resize: both !important;
3434
overflow: auto !important;
35-
max-height: fit-content !important; /* Fix Safari excessive height issue */
36-
height: fit-content !important; /* Ensure height matches content in Safari */
37-
}
38-
39-
/* Fix for high/narrow preview when openByDefault is set */
40-
pid-component[openbydefault] pid-collapsible {
41-
height: fit-content !important;
42-
min-height: fit-content !important;
43-
width: auto !important;
44-
min-width: 75% !important;
4535
}
4636
}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -196,10 +196,8 @@ export class PidComponent {
196196
// Use a longer delay to ensure DOM is fully rendered before recalculating
197197
setTimeout(() => {
198198
const collapsible = this.el.querySelector('pid-collapsible');
199-
if (collapsible) {
200-
if (typeof (collapsible as any).recalculateContentDimensions === 'function') {
201-
(collapsible as any).recalculateContentDimensions();
202-
}
199+
if (collapsible && typeof (collapsible as any).recalculateContentDimensions === 'function') {
200+
(collapsible as any).recalculateContentDimensions();
203201
}
204202
}, 50);
205203
}

‎packages/stencil-library/tailwind.config.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ export default {
77
extend: {
88
resize: {
99
both: 'both',
10-
none: 'none',
11-
x: 'horizontal',
12-
y: 'vertical',
10+
// none: 'none',
11+
// x: 'horizontal',
12+
// y: 'vertical',
1313
},
1414
},
1515
},

0 commit comments

Comments
 (0)