From 55cddf1e2c746c6836b03f0761f0771bbc982730 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Mon, 21 Feb 2022 22:39:38 -0600
Subject: fix layout shift

---
 src/lib/Emoji.svelte                        | 13 ++++---------
 src/lib/minecraft/Inventory.svelte          | 19 +++++++++++++------
 src/routes/player/[player]/[profile].svelte |  3 +++
 3 files changed, 20 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/lib/Emoji.svelte b/src/lib/Emoji.svelte
index 1869f37..4eee2ea 100644
--- a/src/lib/Emoji.svelte
+++ b/src/lib/Emoji.svelte
@@ -1,13 +1,8 @@
-<!-- 
-	@component
-	
-	All the emojis inside the value will be turned into Twemojis.
--->
 <script lang="ts">
-	// Interestingly, the comment above adds whitespace so we don't need to add
-	// padding before the emoji like we usually would.
-	// This is very likely a SvelteKit bug, so when it's fixed we should add
-	// `margin-left: .25em` to .profile-emoji
+	// All the emojis inside the value will be turned into Twemojis.
+
+	// Note: We can't make an @component comment because SvelteKit is dumb and
+	// will replace the comment with whitespace
 
 	import { twemojiHtml } from './utils'
 
diff --git a/src/lib/minecraft/Inventory.svelte b/src/lib/minecraft/Inventory.svelte
index 3068f67..0a6a179 100644
--- a/src/lib/minecraft/Inventory.svelte
+++ b/src/lib/minecraft/Inventory.svelte
@@ -22,12 +22,19 @@
 	}
 </script>
 
-<div class:inventory-container-{name}={name !== ''}>
+<div class="inventory-container" style="--group-limit:{groupLimit}">
 	{#each itemGroups as itemGroup}
-		<div>
-			{#each itemGroup as item}
-				<Item {item} {pack} isslot />
-			{/each}
-		</div>
+		{#each itemGroup as item}
+			<Item {item} {pack} isslot />
+		{/each}
 	{/each}
 </div>
+
+<style>
+	.inventory-container {
+		width: fit-content;
+		display: grid;
+		grid-template-columns: repeat(var(--group-limit), 1fr);
+		grid-gap: 0;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index e31108b..928fc5d 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -146,6 +146,9 @@
 </main>
 
 <style>
+	.profile-emoji {
+		display: inline;
+	}
 	.profile-skills {
 		display: inline-block;
 		position: absolute;
-- 
cgit