fix janky tag positioning

1 files changed, 6 insertions, 9 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 578866e..52094a6 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -135,15 +135,17 @@ body {
 	transition-property: padding, grid-template-rows, grid-template-columns;
 	transition-duration: 0.3s;
 	overflow: hidden;
-	position: relative;
 	display: grid;
 	grid-template-rows: 0fr;
 	grid-template-columns: 0fr;
+	justify-content: center;
+	align-items: center;
 }
 #card #back #tags .tag .inner {
 	position: relative;
 	opacity: 0;
-	transform: translate(-50%, -50%);
+	left: 50%;
+	transform: translate(-50%, 0%);
 	transition-duration: 0.3s;
 	transition-property: opacity, transform;
 	white-space: nowrap;
@@ -155,14 +157,9 @@ body {
 
 /* tag hover/hold expand */
 #card #back #tags:active,
-#card #back #tags:hover {
-	opacity: 1;
-}
+#card #back #tags:hover { opacity: 1; }
 #card #back #tags:active .tag .inner,
-#card #back #tags:hover .tag .inner {
-	transform: translate(0%, 0%);
-	opacity: 1;
-}
+#card #back #tags:hover .tag .inner { opacity: 1; }
 #card #back #tags:active .tag,
 #card #back #tags:hover .tag {
 	grid-template-rows: 1fr;