👁️
let card details scroll instead of wrap for reflow issues
+21
-24
+21
-24
src/routes/card/$id.tsx
+21
-24
src/routes/card/$id.tsx
···
297
297
))}
298
298
299
299
<div
300
-
className="grid gap-x-8 gap-y-4 text-sm"
300
+
className="grid gap-x-8 gap-y-4 text-sm overflow-x-auto"
301
301
style={{
302
-
gridTemplateColumns: "minmax(50%, auto) minmax(0, 1fr)",
302
+
gridTemplateColumns:
303
+
"minmax(min-content, auto) minmax(min-content, 1fr)",
303
304
}}
304
305
>
305
-
<div className="min-w-0">
306
-
<p className="text-gray-600 dark:text-zinc-300">Set</p>
307
-
<p
308
-
className="text-gray-900 dark:text-white truncate"
309
-
title={
310
-
displayCard.set_name
311
-
? `${displayCard.set_name} (${displayCard.set?.toUpperCase()})`
312
-
: undefined
313
-
}
314
-
>
306
+
<div>
307
+
<p className="text-gray-600 dark:text-zinc-300 whitespace-nowrap">
308
+
Set
309
+
</p>
310
+
<p className="text-gray-900 dark:text-white whitespace-nowrap">
315
311
{displayCard.set_name ? (
316
312
<>
317
313
{displayCard.set_name} ({displayCard.set?.toUpperCase()})
···
321
317
)}
322
318
</p>
323
319
</div>
324
-
<div className="min-w-0">
325
-
<p className="text-gray-600 dark:text-zinc-300">Rarity</p>
326
-
<p className="text-gray-900 dark:text-white capitalize truncate">
320
+
<div>
321
+
<p className="text-gray-600 dark:text-zinc-300 whitespace-nowrap">
322
+
Rarity
323
+
</p>
324
+
<p className="text-gray-900 dark:text-white capitalize whitespace-nowrap">
327
325
{displayCard.rarity ?? (
328
326
<span className="text-gray-400 dark:text-zinc-600">—</span>
329
327
)}
330
328
</p>
331
329
</div>
332
-
<div className="min-w-0">
333
-
<p className="text-gray-600 dark:text-zinc-300">Artist</p>
334
-
<p
335
-
className="text-gray-900 dark:text-white truncate"
336
-
title={displayCard.artist}
337
-
>
330
+
<div>
331
+
<p className="text-gray-600 dark:text-zinc-300 whitespace-nowrap">
332
+
Artist
333
+
</p>
334
+
<p className="text-gray-900 dark:text-white whitespace-nowrap">
338
335
{displayCard.artist ?? (
339
336
<span className="text-gray-400 dark:text-zinc-600">—</span>
340
337
)}
341
338
</p>
342
339
</div>
343
-
<div className="min-w-0">
344
-
<p className="text-gray-600 dark:text-zinc-300">
340
+
<div>
341
+
<p className="text-gray-600 dark:text-zinc-300 whitespace-nowrap">
345
342
Collector Number
346
343
</p>
347
-
<p className="text-gray-900 dark:text-white truncate">
344
+
<p className="text-gray-900 dark:text-white whitespace-nowrap">
348
345
{displayCard.collector_number ?? (
349
346
<span className="text-gray-400 dark:text-zinc-600">—</span>
350
347
)}