@lavalogic/scoria 0.37.38 → 0.37.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -116,16 +116,36 @@ export function attachDropdownPortal(options) {
|
|
|
116
116
|
dropdown.style.minWidth = `${tr.width}px`;
|
|
117
117
|
dropdown.style.maxWidth = `${tr.width}px`;
|
|
118
118
|
dropdown.style.zIndex = String(PORTAL_Z_INDEX);
|
|
119
|
+
const availableHeightPx = openUp
|
|
120
|
+
? Math.max(spaceAbove - 8, 64)
|
|
121
|
+
: Math.max(spaceBelow - 8, 64);
|
|
119
122
|
if (openUp) {
|
|
120
123
|
dropdown.style.top = '';
|
|
121
124
|
dropdown.style.bottom = `${viewportHeight - tr.top}px`;
|
|
122
|
-
dropdown.style.maxHeight = `${Math.max(spaceAbove - 8, 64)}px`;
|
|
123
125
|
}
|
|
124
126
|
else {
|
|
125
127
|
dropdown.style.top = `${tr.bottom}px`;
|
|
126
128
|
dropdown.style.bottom = '';
|
|
127
|
-
dropdown.style.maxHeight = `${Math.max(spaceBelow - 8, 64)}px`;
|
|
128
129
|
}
|
|
130
|
+
dropdown.style.maxHeight = `${availableHeightPx}px`;
|
|
131
|
+
// Svelecte's inner `.sv-dropdown-scroll` element has its own
|
|
132
|
+
// `max-height: var(--sv-dropdown-height, 320px); overflow-y:
|
|
133
|
+
// auto` rule, AND the outer `.sv_dropdown` element has
|
|
134
|
+
// `overflow-y: auto` by default. When the trigger is near the
|
|
135
|
+
// viewport edge our outer `max-height` is forced below 320px,
|
|
136
|
+
// so both ended up with their own scrollbars (the visible "two
|
|
137
|
+
// scrollbars stacked" symptom). Two complementary fixes:
|
|
138
|
+
// 1. Override `--sv-dropdown-height` to match the outer's
|
|
139
|
+
// max-height so the inner scroll container shrinks in
|
|
140
|
+
// lockstep instead of staying at its 320px default.
|
|
141
|
+
// 2. Force the outer to `overflow: hidden` so even if the
|
|
142
|
+
// inner's actual rendered height nudges a pixel or two
|
|
143
|
+
// past the outer's content box (border / padding
|
|
144
|
+
// rounding), the outer doesn't sprout its own scrollbar
|
|
145
|
+
// on top of the inner's. The inner remains the single
|
|
146
|
+
// scroll surface.
|
|
147
|
+
dropdown.style.setProperty('--sv-dropdown-height', `${availableHeightPx}px`);
|
|
148
|
+
dropdown.style.overflow = 'hidden';
|
|
129
149
|
};
|
|
130
150
|
const throttled = rafThrottle(reposition);
|
|
131
151
|
const handleScroll = () => {
|
|
@@ -162,6 +182,8 @@ export function attachDropdownPortal(options) {
|
|
|
162
182
|
dropdown.style.maxWidth = '';
|
|
163
183
|
dropdown.style.maxHeight = '';
|
|
164
184
|
dropdown.style.zIndex = '';
|
|
185
|
+
dropdown.style.overflow = '';
|
|
186
|
+
dropdown.style.removeProperty('--sv-dropdown-height');
|
|
165
187
|
dropdown.removeAttribute('data-scoria-portal-dropdown');
|
|
166
188
|
if (!dropdown.classList.contains('is-open')) {
|
|
167
189
|
dropdown.style.display = 'none';
|