Merge branch 'cardModal_styling'

src/components/Card.astro

@@ -3,9 +3,8 @@
 import { isConditionalExpression } from 'typescript';
 import { client } from '../db/typesense.ts';
 import { db } from '../db';
-import RarityIcon from './RarityIcon.astro';
-import EnergyIcon from './EnergyIcon.astro';
 //import * as schema from '../db/schema.ts';
+import RarityIcon from './RarityIcon.astro';
 
 const { query } = Astro.props;
 const searchResults = await client.collections('cards').documents().search({
@@ -39,7 +38,8 @@ const formatPrice = (price:any) => {
 const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
 ---
 {pokemon.map((card) => (
-    <div class="col tcg-card" data-bs-toggle="modal" data-bs-target="#cardModal">
+    <div data-bs-toggle="modal" data-bs-target="#cardModal">
+    <div class="col tcg-card">
         <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
         <div class="row row-cols-5 gx-1 price-row mb-2">
         {card.prices
@@ -59,7 +59,8 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
         <div class="d-flex flex-row lh-1 mt-1">
             <div class="copy-small flex-grow-1">{card.set?.setCode}</div>
             <div class="copy-small">{card.number}</div>
-            <RarityIcon rarity={card.rarityName} />
+            <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
         </div>
     </div>
+    </div>
 ))}