👁️
fix cardmodal on mobile a bit
+159
-157
+159
-157
src/components/deck/CardModal.tsx
+159
-157
src/components/deck/CardModal.tsx
···
113
113
/>
114
114
115
115
{/* Modal */}
116
-
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
117
-
<div
118
-
role="dialog"
119
-
aria-modal="true"
120
-
aria-labelledby={titleId}
121
-
className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-zinc-600"
122
-
>
123
-
{/* Header */}
124
-
<div className="flex items-start justify-between p-6 border-b border-gray-200 dark:border-zinc-700">
125
-
<div className="flex-1 min-w-0">
126
-
{primaryFace ? (
127
-
<>
128
-
<div className="flex items-baseline gap-2 mb-2 flex-wrap">
129
-
<h2
130
-
id={titleId}
131
-
className="text-2xl font-bold text-gray-900 dark:text-white"
132
-
>
133
-
{primaryFace.name}
134
-
</h2>
135
-
{primaryFace.mana_cost && (
136
-
<div className="flex-shrink-0">
137
-
<ManaCost cost={primaryFace.mana_cost} size="small" />
116
+
<div className="fixed inset-0 z-50 overflow-y-auto">
117
+
<div className="flex min-h-full items-center justify-center p-4">
118
+
<div
119
+
role="dialog"
120
+
aria-modal="true"
121
+
aria-labelledby={titleId}
122
+
className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-zinc-600"
123
+
>
124
+
{/* Header */}
125
+
<div className="flex items-start justify-between p-6 border-b border-gray-200 dark:border-zinc-700">
126
+
<div className="flex-1 min-w-0">
127
+
{primaryFace ? (
128
+
<>
129
+
<div className="flex items-baseline gap-2 mb-2 flex-wrap">
130
+
<h2
131
+
id={titleId}
132
+
className="text-2xl font-bold text-gray-900 dark:text-white"
133
+
>
134
+
{primaryFace.name}
135
+
</h2>
136
+
{primaryFace.mana_cost && (
137
+
<div className="flex-shrink-0">
138
+
<ManaCost cost={primaryFace.mana_cost} size="small" />
139
+
</div>
140
+
)}
141
+
</div>
142
+
{primaryFace.type_line && (
143
+
<div className="text-sm text-gray-600 dark:text-zinc-300">
144
+
{primaryFace.type_line}
138
145
</div>
139
146
)}
147
+
</>
148
+
) : (
149
+
<h2
150
+
id={titleId}
151
+
className="text-2xl font-bold text-gray-900 dark:text-white"
152
+
>
153
+
Loading...
154
+
</h2>
155
+
)}
156
+
</div>
157
+
<button
158
+
type="button"
159
+
onClick={onClose}
160
+
aria-label="Close"
161
+
className="text-gray-400 hover:text-gray-600 dark:hover:text-zinc-300 transition-colors ml-4"
162
+
>
163
+
<X className="w-6 h-6" />
164
+
</button>
165
+
</div>
166
+
167
+
{/* Body */}
168
+
<div className="p-6 space-y-6">
169
+
{/* Card image - only shown on mobile where sidebar preview is hidden */}
170
+
{cardData && (
171
+
<div className="md:hidden flex justify-center">
172
+
<div className="w-64">
173
+
<CardImage
174
+
card={cardData}
175
+
size="normal"
176
+
className="w-full h-auto shadow-lg rounded-[4.75%/3.5%]"
177
+
/>
140
178
</div>
141
-
{primaryFace.type_line && (
142
-
<div className="text-sm text-gray-600 dark:text-zinc-300">
143
-
{primaryFace.type_line}
144
-
</div>
145
-
)}
146
-
</>
147
-
) : (
148
-
<h2
149
-
id={titleId}
150
-
className="text-2xl font-bold text-gray-900 dark:text-white"
151
-
>
152
-
Loading...
153
-
</h2>
179
+
</div>
154
180
)}
155
-
</div>
156
-
<button
157
-
type="button"
158
-
onClick={onClose}
159
-
aria-label="Close"
160
-
className="text-gray-400 hover:text-gray-600 dark:hover:text-zinc-300 transition-colors ml-4"
161
-
>
162
-
<X className="w-6 h-6" />
163
-
</button>
164
-
</div>
165
181
166
-
{/* Body */}
167
-
<div className="p-6 space-y-6">
168
-
{/* Card image - only shown on mobile where sidebar preview is hidden */}
169
-
{cardData && (
170
-
<div className="md:hidden flex justify-center">
171
-
<div className="w-48">
172
-
<CardImage
173
-
card={cardData}
174
-
size="normal"
175
-
className="w-full h-auto shadow-lg rounded-[4.75%/3.5%]"
182
+
{/* Quantity */}
183
+
<div>
184
+
<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
185
+
Quantity
186
+
</div>
187
+
<div className="flex items-center gap-3">
188
+
<button
189
+
type="button"
190
+
onClick={() => handleQuantityChange(quantity - 1)}
191
+
disabled={readOnly || quantity <= 1}
192
+
className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
193
+
>
194
+
<Minus className="w-4 h-4 text-gray-700 dark:text-zinc-300" />
195
+
</button>
196
+
<input
197
+
type="number"
198
+
min="1"
199
+
value={quantity}
200
+
onChange={(e) =>
201
+
handleQuantityChange(
202
+
Number.parseInt(e.target.value, 10) || 1,
203
+
)
204
+
}
205
+
disabled={readOnly}
206
+
className="w-20 px-3 py-2 text-center bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
176
207
/>
208
+
<button
209
+
type="button"
210
+
onClick={() => handleQuantityChange(quantity + 1)}
211
+
disabled={readOnly}
212
+
className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
213
+
>
214
+
<Plus className="w-4 h-4 text-gray-700 dark:text-zinc-300" />
215
+
</button>
177
216
</div>
178
217
</div>
179
-
)}
180
218
181
-
{/* Quantity */}
182
-
<div>
183
-
<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
184
-
Quantity
185
-
</div>
186
-
<div className="flex items-center gap-3">
187
-
<button
188
-
type="button"
189
-
onClick={() => handleQuantityChange(quantity - 1)}
190
-
disabled={readOnly || quantity <= 1}
191
-
className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
219
+
{/* Section */}
220
+
<div>
221
+
<label
222
+
htmlFor={sectionId}
223
+
className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"
192
224
>
193
-
<Minus className="w-4 h-4 text-gray-700 dark:text-zinc-300" />
194
-
</button>
195
-
<input
196
-
type="number"
197
-
min="1"
198
-
value={quantity}
199
-
onChange={(e) =>
200
-
handleQuantityChange(
201
-
Number.parseInt(e.target.value, 10) || 1,
202
-
)
203
-
}
204
-
disabled={readOnly}
205
-
className="w-20 px-3 py-2 text-center bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
206
-
/>
207
-
<button
208
-
type="button"
209
-
onClick={() => handleQuantityChange(quantity + 1)}
225
+
Section
226
+
</label>
227
+
<select
228
+
id={sectionId}
229
+
value={card.section}
230
+
onChange={(e) => onMoveToSection(e.target.value as Section)}
210
231
disabled={readOnly}
211
-
className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
232
+
className="w-full px-4 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
212
233
>
213
-
<Plus className="w-4 h-4 text-gray-700 dark:text-zinc-300" />
214
-
</button>
234
+
<option value="commander">Commander</option>
235
+
<option value="mainboard">Mainboard</option>
236
+
<option value="sideboard">Sideboard</option>
237
+
<option value="maybeboard">Maybeboard</option>
238
+
</select>
239
+
</div>
240
+
241
+
{/* Tags */}
242
+
<div>
243
+
<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
244
+
Tags
245
+
</div>
246
+
<div className="mb-2">
247
+
<TagAutocomplete
248
+
suggestions={tagSuggestions}
249
+
onAdd={handleAddTag}
250
+
disabled={readOnly}
251
+
/>
252
+
</div>
253
+
{tags.length > 0 && (
254
+
<div className="flex flex-wrap gap-2">
255
+
{tags.map((tag) => (
256
+
<button
257
+
key={tag}
258
+
type="button"
259
+
onClick={() => !readOnly && handleRemoveTag(tag)}
260
+
disabled={readOnly}
261
+
className="group px-3 py-1 bg-cyan-100 dark:bg-cyan-900 hover:bg-cyan-200 dark:hover:bg-cyan-800 disabled:opacity-50 disabled:cursor-not-allowed text-cyan-800 dark:text-cyan-200 rounded-lg text-sm transition-colors flex items-center gap-1"
262
+
>
263
+
{tag}
264
+
{!readOnly && (
265
+
<X className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
266
+
)}
267
+
</button>
268
+
))}
269
+
</div>
270
+
)}
215
271
</div>
216
272
</div>
217
273
218
-
{/* Section */}
219
-
<div>
220
-
<label
221
-
htmlFor={sectionId}
222
-
className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"
223
-
>
224
-
Section
225
-
</label>
226
-
<select
227
-
id={sectionId}
228
-
value={card.section}
229
-
onChange={(e) => onMoveToSection(e.target.value as Section)}
274
+
{/* Footer */}
275
+
<div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-zinc-700">
276
+
<button
277
+
type="button"
278
+
onClick={handleDelete}
230
279
disabled={readOnly}
231
-
className="w-full px-4 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
280
+
className="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center gap-2"
232
281
>
233
-
<option value="commander">Commander</option>
234
-
<option value="mainboard">Mainboard</option>
235
-
<option value="sideboard">Sideboard</option>
236
-
<option value="maybeboard">Maybeboard</option>
237
-
</select>
282
+
<Trash2 className="w-4 h-4" />
283
+
Delete
284
+
</button>
285
+
<button
286
+
type="button"
287
+
onClick={onClose}
288
+
className="px-6 py-2 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white rounded-lg transition-colors"
289
+
>
290
+
Close
291
+
</button>
238
292
</div>
239
-
240
-
{/* Tags */}
241
-
<div>
242
-
<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
243
-
Tags
244
-
</div>
245
-
<div className="mb-2">
246
-
<TagAutocomplete
247
-
suggestions={tagSuggestions}
248
-
onAdd={handleAddTag}
249
-
disabled={readOnly}
250
-
/>
251
-
</div>
252
-
{tags.length > 0 && (
253
-
<div className="flex flex-wrap gap-2">
254
-
{tags.map((tag) => (
255
-
<button
256
-
key={tag}
257
-
type="button"
258
-
onClick={() => !readOnly && handleRemoveTag(tag)}
259
-
disabled={readOnly}
260
-
className="group px-3 py-1 bg-cyan-100 dark:bg-cyan-900 hover:bg-cyan-200 dark:hover:bg-cyan-800 disabled:opacity-50 disabled:cursor-not-allowed text-cyan-800 dark:text-cyan-200 rounded-lg text-sm transition-colors flex items-center gap-1"
261
-
>
262
-
{tag}
263
-
{!readOnly && (
264
-
<X className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
265
-
)}
266
-
</button>
267
-
))}
268
-
</div>
269
-
)}
270
-
</div>
271
-
</div>
272
-
273
-
{/* Footer */}
274
-
<div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-zinc-700">
275
-
<button
276
-
type="button"
277
-
onClick={handleDelete}
278
-
disabled={readOnly}
279
-
className="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center gap-2"
280
-
>
281
-
<Trash2 className="w-4 h-4" />
282
-
Delete
283
-
</button>
284
-
<button
285
-
type="button"
286
-
onClick={onClose}
287
-
className="px-6 py-2 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white rounded-lg transition-colors"
288
-
>
289
-
Close
290
-
</button>
291
293
</div>
292
294
</div>
293
295
</div>