change column layout

src/components/PrintingRow/PrintingRow.jsx

@@ -32,22 +32,24 @@ function PrintingRow({ card_id, printing }) {
   return (
     <div
       style={{
-        display: 'flex',
+        display: 'grid',
-        justifyContent: 'space-between',
+        gridTemplateColumns: '80px 1fr 120px auto',
+        gap: '0.5rem',
         padding: '0.25rem 0',
-        opacity: loading ? 0.6 : 1,
+        alignItems: 'center',
-        alignItems: 'center'
+        opacity: loading ? 0.6 : 1
       }}
     >
-      {/* Left side: Set code, Set name, Rarity */}
+      {/* Column 1: Set code */}
-      <span style={{ minWidth: '80px', fontFamily: 'monospace' }}>
+      <span style={{ fontFamily: 'monospace' }}>{printing.set_code}</span>
-        {printing.set_code}
-      </span>
-      <span>
-        {printing.set_name} {printing.rarity_name}
-      </span>
 
-      {/* Right side: Amount buttons */}
+      {/* Column 2: Set name */}
+      <span>{printing.set_name}</span>
+
+      {/* Column 3: Rarity */}
+      <span>{printing.rarity_name}</span>
+
+      {/* Column 4: Amount controls */}
       <div>
         <button onClick={decrement} disabled={loading || currentAmount === 0}>–</button>
         <span style={{ margin: '0 0.5rem' }}>{currentAmount}</span>