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: make table horizontally overflow

mary.my.id bd1b37d9 54fa18de

verified
+43 -41
+43 -41
src/components/package-bundle.tsx
··· 267 267 </button> 268 268 269 269 <Show when={breakdownOpen()}> 270 - <table class="w-full text-base-200"> 271 - <thead> 272 - <tr class="text-left text-neutral-foreground-3"> 273 - <th class="py-1 pr-4 font-medium">File</th> 274 - <th class="py-1 pr-4 text-right font-medium">Minified</th> 275 - <th class="py-1 pr-4 text-right font-medium">Gzip</th> 276 - {totals().brotliSize !== undefined && ( 277 - <th class="py-1 pr-4 text-right font-medium">Brotli</th> 278 - )} 279 - {totals().zstdSize !== undefined && ( 280 - <th class="py-1 text-right font-medium">Zstd</th> 281 - )} 282 - </tr> 283 - </thead> 284 - <tbody> 285 - <For each={sortedOutput()}> 286 - {(item) => ( 287 - <tr 288 - classList={{ 289 - 'text-neutral-foreground-2': item.type === 'chunk', 290 - 'text-neutral-foreground-3': item.type === 'asset', 291 - }} 292 - > 293 - <td class="py-1 pr-4 font-mono">{item.filename}</td> 294 - <td class="py-1 pr-4 text-right">{formatBytes(item.size)}</td> 295 - <td class="py-1 pr-4 text-right">{formatBytes(item.gzipSize)}</td> 296 - {totals().brotliSize !== undefined && ( 297 - <td class="py-1 pr-4 text-right"> 298 - {item.brotliSize !== undefined ? formatBytes(item.brotliSize) : '—'} 299 - </td> 300 - )} 301 - {totals().zstdSize !== undefined && ( 302 - <td class="py-1 text-right"> 303 - {item.zstdSize !== undefined ? formatBytes(item.zstdSize) : '—'} 304 - </td> 305 - )} 306 - </tr> 307 - )} 308 - </For> 309 - </tbody> 310 - </table> 270 + <div class="overflow-x-auto"> 271 + <table class="w-full text-base-200 whitespace-nowrap"> 272 + <thead> 273 + <tr class="text-left text-neutral-foreground-3"> 274 + <th class="py-1 pr-4 font-medium">File</th> 275 + <th class="py-1 pr-4 text-right font-medium">Minified</th> 276 + <th class="py-1 pr-4 text-right font-medium">Gzip</th> 277 + {totals().brotliSize !== undefined && ( 278 + <th class="py-1 pr-4 text-right font-medium">Brotli</th> 279 + )} 280 + {totals().zstdSize !== undefined && ( 281 + <th class="py-1 text-right font-medium">Zstd</th> 282 + )} 283 + </tr> 284 + </thead> 285 + <tbody> 286 + <For each={sortedOutput()}> 287 + {(item) => ( 288 + <tr 289 + classList={{ 290 + 'text-neutral-foreground-2': item.type === 'chunk', 291 + 'text-neutral-foreground-3': item.type === 'asset', 292 + }} 293 + > 294 + <td class="py-1 pr-4 font-mono">{item.filename}</td> 295 + <td class="py-1 pr-4 text-right">{formatBytes(item.size)}</td> 296 + <td class="py-1 pr-4 text-right">{formatBytes(item.gzipSize)}</td> 297 + {totals().brotliSize !== undefined && ( 298 + <td class="py-1 pr-4 text-right"> 299 + {item.brotliSize !== undefined ? formatBytes(item.brotliSize) : '—'} 300 + </td> 301 + )} 302 + {totals().zstdSize !== undefined && ( 303 + <td class="py-1 text-right"> 304 + {item.zstdSize !== undefined ? formatBytes(item.zstdSize) : '—'} 305 + </td> 306 + )} 307 + </tr> 308 + )} 309 + </For> 310 + </tbody> 311 + </table> 312 + </div> 311 313 </Show> 312 314 </div> 313 315 </Show>