fix layout shift

6 files changed, 31 insertions, 22 deletions

diff --git a/package.json b/package.json
index 0b31905..c524c3c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "^1.0.0-next.281",
     "@types/cookie": "^0.4.1",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
@@ -23,7 +23,7 @@
     "eslint-plugin-svelte3": "^3.2.1",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
-    "svelte": "^3.46.0",
+    "svelte": "^3.46.4",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.1",
     "tslib": "^2.3.1",
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;
diff --git a/svelte.config.js b/svelte.config.js
index 4811785..812ec21 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,6 +11,10 @@ const config = {
 	// for more information about preprocessors
 	preprocess: preprocess(),
 
+	compilerOptions: {
+		preserveWhitespace: false
+	},
+
 	kit: {
 		adapter: adapter(),
 		// adapter: adapter({
diff --git a/yarn.lock b/yarn.lock
index 35be23e..0e6d833 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -151,10 +151,10 @@
   dependencies:
     esbuild "^0.14.21"
 
-"@sveltejs/kit@next":
-  version "1.0.0-next.269"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.269.tgz#654929ea7663bda65d58b2f088f7d096370b2237"
-  integrity sha512-Z6BqG/vo1IYPy2mW5r0mHHY5JsOAWrbBQuJFfG2aANxWQSIfWhZ/U35Ndk4Un4SlOT0QIgmeSz6qB8nJvuclbQ==
+"@sveltejs/kit@^1.0.0-next.281":
+  version "1.0.0-next.281"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.281.tgz#3b4f9146b944ae531e8ff6a973f2a7b78a3f24d2"
+  integrity sha512-IBEqbckzNmLGEFqi+4gG0XxNyQ/koO+OYK2fSjNZvRxLL9W1H4RhMRmEGdZGvPt1opBuqD0ErgdgmHMNO+B8XQ==
   dependencies:
     "@sveltejs/vite-plugin-svelte" "^1.0.0-next.32"
     sade "^1.7.4"
@@ -1944,7 +1944,7 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.1:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-svelte@^3.46.0:
+svelte@^3.46.4:
   version "3.46.4"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.46.4.tgz#0c46bc4a3e20a2617a1b7dc43a722f9d6c084a38"
   integrity sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==