diff --git a/src/Components/CardImage.jsx b/src/Components/CardImage.jsx
index 9a150f9d..0db27911 100644
--- a/src/Components/CardImage.jsx
+++ b/src/Components/CardImage.jsx
@@ -16,11 +16,9 @@ export default function CardImage(props) {
 				color: props.card.upped ? '#000' : '#fff',
 				...props.style,
 			}}>
-			<span style="overflow:hidden;text-overflow:ellipsis">
-				{props.card.name}
-			</span>
+			<span style="name">{props.card.name}</span>
 			{!!props.card.cost && (
-				<span style="flex-shrink:0;pointer-events:none">
+				<span class="cost">
 					{props.card.cost}
 					<span class={'ico te' + props.card.costele} />
 				</span>
diff --git a/ui.css b/ui.css
index 71c15633..ec1a3e1e 100644
--- a/ui.css
+++ b/ui.css
@@ -166,6 +166,16 @@ select:hover:active {
 	white-space: nowrap;
 	justify-content: space-between;
 }
+.cardslot > .name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cardslot > .cost {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	pointer-events: none;
+}
 .maintitle {
 	font-size: 16px;
 	text-align: center;