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.

refactor: compact size UI

Mary 30bba122 dcc176b6

+3 -3
+1 -1
src/components/package-bundle.tsx
··· 195 195 {(bundleData) => ( 196 196 <div class="flex flex-col gap-5"> 197 197 {/* size display card */} 198 - <div class="flex flex-wrap items-stretch gap-8 rounded-lg border border-neutral-stroke-3 bg-neutral-background-1 p-4"> 198 + <div class="sticky top-1 flex flex-wrap items-stretch gap-4 rounded-lg border border-neutral-stroke-3 bg-neutral-background-1 px-4 py-3"> 199 199 <SizeStat label="Minified" size={bundleData().size} /> 200 200 201 201 <SizeStat label="Gzip" size={bundleData().gzipSize} />
+2 -2
src/components/size-stat.tsx
··· 10 10 return ( 11 11 <Tooltip content={formatLongBytes(props.size)} relationship="description"> 12 12 {(triggerProps) => ( 13 - <div class="flex flex-col gap-1" {...triggerProps}> 13 + <div class="flex items-center gap-2" {...triggerProps}> 14 14 <span class="text-base-300 text-neutral-foreground-3">{props.label}</span> 15 - <span class="text-base-500 font-semibold text-neutral-foreground-1">{formatBytes(props.size)}</span> 15 + <span class="text-base-300 font-semibold text-neutral-foreground-1">{formatBytes(props.size)}</span> 16 16 </div> 17 17 )} 18 18 </Tooltip>