๐Ÿ‘๏ธ
5
fork

Configure Feed

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

let card details scroll instead of wrap for reflow issues

+21 -24
+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 )}