fix: random emojis are fixed in dimensions

szattila98 · Mar 31, 2024 · ef49417 · ef49417
1 parent 528ca87
commit ef49417
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/src/lib/components/RandomEmoji.svelte b/src/lib/components/RandomEmoji.svelte
@@ -6,14 +6,24 @@
 	$: emoji = emojis[Math.floor(Math.random() * emojis.length)];
 </script>
 
-{#if emoji.startsWith('&#')}
-	<!-- eslint-disable svelte/no-at-html-tags -->
-	<span class="text-emoji">{@html emoji}</span>
-{:else}
-	<img class="img-emoji" src={`/img/emojis/${emoji}`} alt={emoji.split('.')[0]} />
-{/if}
+<div class="emoji-container">
+	{#if emoji.startsWith('&#')}
+		<!-- eslint-disable svelte/no-at-html-tags -->
+		<span class="text-emoji">{@html emoji}</span>
+	{:else}
+		<img class="img-emoji" src={`/img/emojis/${emoji}`} alt={emoji.split('.')[0]} />
+	{/if}
+</div>
 
 <style scoped>
+	.emoji-container {
+		align-items: center;
+		display: flex;
+		height: var(--emoji-container-height, 32px);
+		justify-content: center;
+		width: var(--emoji-container-width, 32px);
+	}
+
 	.text-emoji {
 		font-size: var(--emoji-font-size, 24px);
 	}