Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
fix: prevent overflowing on dropdown
+17
-5
+14
-2
src/primitives/dropdown/dropdown-listbox.tsx
+14
-2
src/primitives/dropdown/dropdown-listbox.tsx
···
1
-
import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
1
+
import { autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
2
2
import { createEffect, onCleanup, onMount, type JSX } from 'solid-js';
3
3
import { Portal } from 'solid-js/web';
4
4
···
37
37
const { x, y } = await computePosition(trigger, el, {
38
38
placement: 'bottom-start',
39
39
strategy: 'absolute',
40
-
middleware: [offset(4), flip(), shift({ padding: 8 })],
40
+
middleware: [
41
+
offset(4),
42
+
flip(),
43
+
shift({ padding: 8 }),
44
+
size({
45
+
padding: 8,
46
+
apply({ availableWidth }) {
47
+
Object.assign(el.style, {
48
+
maxWidth: `${availableWidth}px`,
49
+
});
50
+
},
51
+
}),
52
+
],
41
53
});
42
54
43
55
Object.assign(el.style, {
+2
-2
src/primitives/dropdown/dropdown-option.tsx
+2
-2
src/primitives/dropdown/dropdown-option.tsx
···
81
81
aria-disabled={props.disabled}
82
82
onClick={handleClick}
83
83
onMouseMove={handleMouseMove}
84
-
class="box-border flex min-h-8 items-center gap-1 rounded-md px-2 py-1.5 text-base-300 outline-none select-none"
84
+
class="box-border flex min-h-8 shrink-0 items-center gap-1 rounded-md px-2 py-1.5 text-base-300 outline-none select-none"
85
85
classList={{
86
86
'text-neutral-foreground-disabled cursor-not-allowed': props.disabled,
87
87
'text-neutral-foreground-2 hover:text-neutral-foreground-2-hover active:bg-neutral-background-1-pressed':
···
97
97
</span>
98
98
99
99
{/* content */}
100
-
<span class="grow">{props.children}</span>
100
+
<span class="min-w-0 grow wrap-break-word">{props.children}</span>
101
101
</div>
102
102
);
103
103
};
+1
-1
src/primitives/dropdown/dropdown-trigger.tsx
+1
-1
src/primitives/dropdown/dropdown-trigger.tsx
···
31
31
32
32
// #region styles
33
33
34
-
const rootBaseStyles = tw`inline-flex w-full items-center justify-between bg-neutral-background-1 text-left align-middle outline-2 -outline-offset-2 outline-transparent transition duration-100 select-none`;
34
+
const rootBaseStyles = tw`inline-flex w-full min-w-0 items-center justify-between bg-neutral-background-1 text-left align-middle outline-2 -outline-offset-2 outline-transparent transition duration-100 select-none`;
35
35
36
36
const rootSizeStyles: Record<DropdownSize, string> = {
37
37
small: tw`min-h-6 gap-2 px-2 text-base-200`,