Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
fix: make table horizontally overflow
+43
-41
+43
-41
src/components/package-bundle.tsx
+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>