Find the cost of adding an npm package to your app's bundle size teardown.kelinci.dev
14
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: prevent overflowing on dropdown

Mary 164b6ccb 782b3d9f

+17 -5
+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
··· 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
··· 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`,